Next · use client
use client 영향 추적 흐름
파일 상단의 한 줄은 컴파일 그래프, 번들, 하이드레이션, 디버깅 위치를 함께 바꿉니다.
적용 이후 단계
compile to browser
directive
"use client" 파일이
경계를 엽니다.
client graph
해당 파일이 import한 UI가 브라우저 번들 후보가 됩니다.
server render
초기 HTML은 서버에서 만들고 이벤트는 아직 연결 전입니다.
hydrate
JS가 로드되면 상태, effect, event handler가 살아납니다.
debug
서버 콘솔과 브라우저 콘솔의 로그 위치를 나눠 봅니다.
빌드 오류
서버 전용 모듈이 클라이언트 그래프에 섞였는지 확인합니다.
런타임 오류
window 접근이 서버 컴포넌트에 남아 있는지 봅니다.
하이드레이션
서버 HTML과 브라우저 첫 렌더 결과 차이를 찾습니다.
배포 점검
프로덕션 빌드에서 JS chunk와 interaction 지연을 확인합니다.
지시어는 기능 스위치가 아니라 경계 선언입니다. 필요한 파일에만 두고, 정적 콘텐츠와 데이터 페칭은 서버 컴포넌트에 남기는 것이 기본 전략입니다.