component boundary map
"use client"는 파일 단위 경계와 번들 시작점을 만든다
클릭, 입력, 브라우저 API가 필요한 섬만 클라이언트로 보내고 데이터 조회와 정적 마크업은 서버 컴포넌트에 남긴다.
상호작용 섬
상태, 이벤트, effect가 필요한 부분만 클라이언트 파일로 분리한다.
하이드레이션
초기 HTML 위에 이벤트가 연결되는 범위를 확인한다.
서버 화면 작성
페이지와 데이터 조회는 기본 서버 컴포넌트로 시작한다.
이벤트 섬 분리
클릭과 입력이 필요한 UI만 새 클라이언트 파일로 뺀다.
props 정리
함수, Date, class 인스턴스처럼 전달이 어려운 값을 피한다.
번들 범위 확인
지시어 아래 import가 과도하게 커지지 않았는지 본다.
상황
둘 위치
점검
데이터 조회
서버 컴포넌트
클라이언트로 비밀 값이나 서버 전용 로직을 보내지 않는다.
버튼 이벤트
클라이언트 컴포넌트
useState, useEffect, 브라우저 API 사용
여부를 본다.
서버 콘텐츠 감싸기
children 전달
클라이언트가 서버 파일을 직접 실행한다고 오해하지 않는다.
첫 줄에 선언
지시어는 import보다 위에 있어야 클라이언트 경계로 인식된다.
JSON처럼 전달
서버에서 클라이언트로 넘기는 값은 직렬화 가능해야 한다.
경계를 작게 유지
정적 마크업까지 클라이언트 번들로 끌고 가지 않는다.
failure check
문제가 생길 때 보는 곳
하이드레이션
서버 HTML과 브라우저 첫 렌더 결과가 달라지는지 확인한다.
브라우저 API
window, storage, media query 접근은 클라이언트 파일에
둔다.
import 범위
큰 라이브러리를 지시어 아래에서 무심코 끌어오지 않는다.