서버에 남길 책임
실행 위치가 서버일수록 보안과 초기 렌더링 품질을 유지하기 쉽다.
기본값은 서버, 필요한 섬만 클라이언트
데이터 접근, 보안 경계, 번들 절감은 서버에 두고 이벤트가 필요한 부분만 작게 분리한다.
클라이언트로 내릴 책임
사용자 조작으로 즉시 바뀌는 작은 영역만 클라이언트 경계 밖으로 꺼낸다.
useState
onClick
window API
localStorage
| 검토 기준 | 서버 컴포넌트가 유리 | 클라이언트 컴포넌트가 필요 |
|---|---|---|
| 데이터 위치 | 서버 리소스, 권한, 민감 정보를 직접 다룬다. | 브라우저 상태나 사용자 입력 이후 값이 중심이다. |
| 번들 영향 | 큰 라이브러리를 서버에서 실행해 JS 전송량을 줄인다. | 상호작용 코드만 작게 내려 hydration 범위를 제한한다. |
| 렌더 품질 | 첫 HTML에 내용을 채워 SEO와 초기 표시를 안정화한다. | 클릭, 입력, 토글처럼 즉시 반응해야 하는 UI를 담당한다. |
특별한 이유가 없으면 서버 컴포넌트로 시작한다.
상호작용이 필요한 부분만 별도 파일로 분리한다.
props 직렬화와 import 방향을 함께 확인한다.
핵심: 서버에 둘 수 있는 것은 서버에 두고, 사용자 입력으로 바뀌는 작은 부분만 클라이언트로 내린다.