use client 실행 위치 경계

필요 이유를 하나로 적는다

useState 때문인지, localStorage 때문인지, click handler 때문인지 명확하지 않으면 경계를 다시 본다.

layout이나 page에 붙은 use client는 하위 전체를 끌어올리므로 작은 파일로 내려 보낸다.

client 파일에서 DB, fs, secret, server-only helper를 import하지 않도록 의존성을 정리한다.

Hydration

브라우저 연결 비용 HTML에 이벤트와 상태를 붙이는 과정이 필요하다.

작은 섬일수록 비용이 낮다.

Bundle

전송되는 JS client boundary 아래 라이브러리가 사용자에게 전달될 수 있다.

차트와 에디터를 특히 본다.

Browser API

window/document 필요 서버에는 없는 API를 쓰면 client가 필요하다.

effect 안에서 접근한다.

Server alternative

서버 액션/폼 제출 뒤 결과만 서버에서 처리할 수 있는지 비교한다.

UX 요구가 기준이다.

이유 파일 상단의 use client가 필요한 구체 기능을 하나 이상 말할 수 있는가.

위치 use client가 page나 layout보다 더 작은 컴포넌트로 내려갈 수 있는가.

import client 파일이 서버 전용 모듈을 간접 import하지 않는가.

// Bad: whole page is client
// Better: server page + client SearchBox