클라이언트 컴포넌트 경계 기준

이벤트가 있는 곳 탐색

상호작용이 실제 필요한 버튼, 폼, 탭만 client component로 만든다.

서버 부모 유지

데이터 fetch와 static markup은 서버 부모가 맡고, client child에는 필요한 값만 넘긴다.

무거운 의존성을 격리한다

차트, 에디터, 지도처럼 큰 라이브러리는 route 전체가 아니라 해당 섬에만 묶는다.

Hooks

브라우저 상태 useState와 useEffect가 필요하면 client 경계가 필요하다.

서버 컴포넌트에서는 쓸 수 없다.

Event

사용자 입력 onClick 같은 handler는 브라우저에서 실행되어야 한다.

submit은 server action과 비교한다.

Import tree

번들 확산 client 파일이 import한 모듈은 클라이언트 번들로 들어갈 수 있다.

서버 전용 코드를 import하지 않는다.

Props

직렬화 경계 서버에서 client로 넘기는 값은 직렬화 가능해야 한다.

함수는 server action 규칙을 따로 본다.

최소 범위 · 의존성 · 번들 점검

최소 범위 전체 page나 layout 대신 작은 interactive child로 충분하지 않은가.

의존성 client boundary 아래에 DB, fs, secret 모듈이 섞이지 않는가.

번들 큰 라이브러리를 route 전체에 끌어올리지 않는가.

작은 클라이언트 컴포넌트

// Server parent
<ProductDetails data={data
        overflow-wrap: break-word;
        word-break: keep-all;
      } />
<AddToCartButton productId={data.id} />

// AddToCartButton.tsx: 'use client'