클라이언트 경계 검토

use client 경계

브라우저 기능이 필요한 지점만 작게 열고, 데이터 조회와 비밀 값, 캐시 결정은 서버 쪽에 남겨야 번들 크기와 보안이 안정됩니다.

server first

서버에 남길 것

  • DB, 파일, 비밀 키 접근
  • 초기 데이터 fetch와 SEO용 HTML
  • route segment의 metadata와 redirect
client leaf

클라이언트로 열 것

  • useState, useEffect, 이벤트 핸들러
  • window, document, storage 접근
  • 즉시 반응해야 하는 입력 UI
bridge

경계 통과 규칙

  • props는 직렬화 가능한 값으로 제한
  • 서버 컴포넌트는 children으로 전달
  • 변경은 서버 액션으로 되돌림
operate

운영 영향

  • 상위 선언은 하위 번들을 함께 키움
  • 액션 후 캐시 재검증이 필요함
  • Node 전용 코드는 브라우저로 새면 안 됨
declare

use client 선언 전 질문

이 파일의 모든 하위 import가 브라우저 번들에 들어가도 되는지 먼저 확인합니다.

아니라면 상호작용 컴포넌트를 더 아래로 분리합니다.
verify

use client 선언 후 확인

서버 전용 모듈이 섞이지 않았는지, 액션 뒤에 revalidatePath나 tag가 연결되는지 점검합니다.

경계는 작게, 데이터 일관성은 서버에서 맞춥니다.
1. 라우트 단위

page와 layout은 서버 기본값으로 시작합니다.

2. 인터랙션 위치

클릭, 입력, 브라우저 API가 있는 리프만 분리합니다.

3. 캐시 연결

변경이 있으면 서버 액션과 재검증 지점을 묶습니다.

4. 배포 점검

번들 크기와 런타임 API 제약을 확인합니다.