브라우저에 보내지 않을 코드
DB 조회, markdown 변환, 권한 검사, 큰 데이터 가공은 서버 컴포넌트에 둔다.
NEXT · BUNDLE
클라이언트 번들 유출 방지 지도
use client 파일이 import한 모듈은 브라우저 번들로 따라올 수 있다.
경계를 작게 두고 서버 전용 코드는 바깥에 남긴다.
상호작용만 작게 감싼다
버튼 상태, 입력값, 모달 열림처럼 브라우저 상태가 필요한 최소 부분만 둔다.
무거운 UI는 늦게 가져온다
차트, 지도, 에디터는 클릭이나 노출 시점까지 초기 번들에서 제외한다.
Server Component -> Client Shell 흐름이면 큰 유틸이 번들로 새기 어렵다.
한 줄 import가 전체 parser나 SDK를 브라우저 번들에 끌고 올 수 있다.
가장 작은 컴포넌트에만 use client를 둔다.
서버 컴포넌트가 만든 값은 직렬화 가능한 props로 넘긴다.
첫 화면에 없으면 동적 로딩 후보로 표시한다.
번들 분석에서 큰 의존성의 진입 파일을 확인한다.