client boundary
use client는 파일 하나가 아니라 import 범위를 바꾼다
지시어가 붙은 파일은 클라이언트 그래프의 시작점이 된다. 경계를 위로
올릴수록 번들과 하이드레이션 범위도 넓어진다.
위치
파일 첫 비주석 라인에 문자열 지시어로 둔다.
범위
해당 파일과 import 하위 UI가 브라우저 실행 후보가 된다.
비용
JS 번들, 직렬화 props, 하이드레이션 비용을 함께 만든다.
위치
서버에 남길 이유
클라이언트가 필요한 신호
권장 판단
Page
상위
데이터 페칭, 서버 전용 모듈, 초기 HTML 생성
페이지 전체가 상태와 이벤트에 의존할 때
가능하면 서버 컴포넌트로 유지한다.
Layout
공통 UI
정적 내비게이션, 메타데이터, 서버 캐시
테마 토글처럼 실제 상호작용이 layout 안에 있을 때
상호작용 리프만 분리한다.
Data View
표시 영역
DB, 파일 시스템, 비밀값이 필요한 영역
필터, 정렬, 입력 상태를 브라우저에서 즉시 다룰 때
서버 데이터는 props로 넘기고 상호작용만 분리한다.
Button
리프
서버에 남길 이유가 적고 코드 범위가 작다.
onClick, useState, Web API, focus 제어
대부분 여기만 클라이언트 경계로 둔다.
01
상호작용 확인
이벤트, 상태, 브라우저 API가 필요한 가장 작은 컴포넌트를 찾는다.
02
서버 코드 차단
DB 연결, 파일 시스템, 비밀값 import가 클라이언트 그래프에 들어오지
않게 한다.
03
props 직렬화
서버에서 클라이언트로 넘기는 값이 직렬화 가능한지 확인한다.
04
번들 범위
경계 위쪽으로 선언했을 때 늘어나는 JS와 하이드레이션 범위를 본다.
판단 기준
먼저 서버 컴포넌트로 유지하고, 브라우저 기능이 필요한 가장 낮은
리프에만
use client를 붙인다.