Next · Client Component

클라이언트 컴포넌트 도입 점검

라우트는 서버 컴포넌트로 유지하고, 이벤트와 브라우저 API가 필요한 리프만 클라이언트 경계로 분리합니다.

라우팅과 렌더링 흐름

boundary

page.tsx는 기본적으로 서버에서 렌더링되고 SEO용 HTML을 만듭니다.

서버 데이터는 JSON으로 표현 가능한 값만 클라이언트에 전달합니다.

"use client" 파일에서 상태와 이벤트를 처리합니다.

브라우저가 JS를 받아 버튼, 폼, 효과를 상호작용 가능하게 만듭니다.

서버에 남길 것 DB 접근, API key, 초기 데이터 페칭, 정적 레이아웃

클라이언트로 보낼 것 로컬 상태, 이벤트 핸들러, 브라우저 전용 API

디버깅할 것 하이드레이션 경고, props 직렬화 오류, 번들 증가

원칙

클라이언트 컴포넌트는 많이 쓰는 기능이 아니라 필요한 경계입니다. 가능한 깊은 리프에 배치할수록 서버 렌더링의 장점과 상호작용을 함께 얻습니다.