nextjs에서 개발을 하다보면 가끔씩 헷갈리는 때가 있는데, 클라이언트 컴포넌트와 서버 컴포넌트가 혼재되어 있는 경우이다.
클라이언트 컴포넌트와 서버 컴포넌트는 기본적으로 렌더링 되는 방식부터 다르다.
클라이언트 컴포넌트의 경우
- 서버에서 HTML을 반환 (
<div id="root"></div>처럼 비어있는 상태일 수 있음) - 클라이언트에서 React가 hydration(상태 복원) 후 실행됨
- JavaScript 번들이 로드된 후 UI가 동적으로 그려짐
서버 컴포넌트의 경우
- 서버에서 실행되며 React 컴포넌트가 HTML로 변환됨
- HTML을 클라이언트로 전송 (CSR 없이 바로 브라우저에서 렌더링됨)
- 클라이언트에서 hydration 진행 (클라이언트 기능이 필요한 경우 추가 처리됨)
| 작업 | Server Component | Client Component |
|---|---|---|
| 데이터 페칭 | ☑ | ☒ |
| 백엔드 리소스 접근 | ☑ | ☒ |
| 서버의 민감 정보 보관 | ☑ | ☒ |
| 서버에 큰 종속성 보관 / 클라이언트 스크립트 번들 크기 줄이기 | ☑ | ☒ |
상호작용 추가 (onClick(), onChange(), etc) | ☒ | ☑ |
state 사용과 리액트 라이프사이클 effect 사용 (useState(), useReducer(), useEffect(), etc) | ☒ | ☑ |
| 브라우저 전용 API 사용 | ☒ | ☑ |
| 커스텀 훅 | ☒ | ☑ |
| 클래스 컴포넌트 사용 | ☒ | ☑ |