서버를 기본값으로 두고 상호작용만 경계 밖으로 보낸다

App Router 컴포넌트는 기본적으로 서버에서 실행된다. 브라우저 기능이 필요한 가장 작은 하위 트리에만 'use client' 경계를 둔다.

SERVER · default

서버에서 끝낼 수 있는 일

DataDB query·markdown·파일을 직접 읽는다.
Secret환경 변수와 비밀 API를 브라우저로 보내지 않는다.
Async컴포넌트에서 await로 데이터를 준비한다.
ProductPage()

권한 검사와 DB 조회

ProductSummary

정적 표시 · JS 불필요

product 직렬화

client로 건널 props를 선별

BuyButton

클릭이 필요한 작은 island

'use client' · serializable props only
BROWSER · opt-in

상호작용이 필요한 일

hooksuseState·useEffect·브라우저 상태
eventsclick·input·focus 핸들러
bundleclient child와 그 의존성이 브라우저 JS 후보
경계를 통과하는 값✓ string · number · plain object
× function · class instance · 애매한 Date
Bundle서버 컴포넌트 자체는 클라이언트 번들에 포함되지 않는다.
Import 방향client가 import한 하위 트리는 번들 후보가 되므로 경계를 낮게 둔다.
Waterfall서버 await가 직렬로 이어지지 않도록 데이터 준비를 병렬화한다.

점검불필요한 use client가 없는가 · 함수나 비직렬화 객체를 넘기지 않는가 · 서버 전용 모듈이 client에서 import되지 않는가.