use client
기능 요구, 데이터 출처, 번들 영향을 같이 본다
지시어는 편하지만 넓게 붙일수록 실행 위치와 전송 비용이 함께 바뀝니다.
기능 요구
상태, 이벤트, 브라우저 API가 실제로 필요한가.
데이터 출처
민감 정보와 서버 전용 로직이 섞이지 않는가.
번들 영향
하위 import가 불필요하게 클라이언트로 내려가지 않는가.
01
요구 확인
hook과 event가 없으면 서버 컴포넌트로 유지한다.
02
파일 분리
상호작용 섬을 작은 파일로 잘라 지시어를 그 안에 둔다.
03
전달 정리
서버 결과는 직렬화 가능한 props 또는 children으로 넘긴다.
04
비용 점검
브라우저 번들, hydration, 배포 환경 제약을 함께 본다.
신호
서버 유지
클라이언트 전환
로직 위치
DB, secret, server-only package를 다룬다.
브라우저 상태와 사용자 입력을 다룬다.
props 형태
서버에서 완성한 data와 HTML 결과를 넘긴다.
함수나 복잡한 인스턴스 대신 plain value를 받는다.
성능 비용
무거운 계산과 렌더링은 서버에서 처리한다.
상호작용에 필요한 최소 코드만 전송한다.
작게 선언
지시어는 가장 작은 상호작용 파일에 둔다.
서버 보호
API key와 DB 연결은 클라이언트 경계 밖에 둔다.
번들 확인
import가 넓게 딸려 내려오면 경계를 다시 쪼갠다.