서버/클라이언트 경계는 번들 크기, 보안, 데이터 접근, 상호작용 위치를 동시에 바꾼다
App Router의 기본값은 서버 컴포넌트다. 필요한 상호작용만 클라이언트로 밀어내야 구조와 성능이 안정된다.
| 판단 항목 | 서버 컴포넌트에 두면 | 클라이언트 컴포넌트가 필요할 때 | 실수 신호 |
|---|---|---|---|
| 데이터 접근 | DB/API 키를 서버에 유지 | 브라우저 이벤트로 다시 요청할 때 | 비밀값 노출 위험 |
| 상태 관리 | 초기 HTML만 생성 | useState, useEffect, onClick 필요 | Hook 사용 오류 |
| 번들 크기 | 브라우저 JS 감소 | 실제 상호작용 UI만 | 불필요한 use client 확산 |
| 레이아웃 | 공통 구조를 서버에서 렌더 | 테마 토글, 메뉴 상태 등 | 전체 layout이 클라이언트화 |
| 오류 복구 | 서버 렌더 오류 경계 활용 | 사용자 retry 버튼 제공 | error.tsx에 use client 누락 |