서버 컴포넌트
React 18에서 도입된 개념으로, 서버에서만 렌더링되어 클라이언트 번들에 포함되지 않는 컴포넌트입니다.
핵심 특징
- 서버에서 실행: 파일 시스템, DB, 내부 API에 직접 접근 가능
- 클라이언트 번들 크기 감소: 컴포넌트 코드 자체가 브라우저에 전송되지 않음
- 보안: API 키, DB 연결 정보 등 민감한 정보를 클라이언트에 노출하지 않음
useState,useEffect, 이벤트 핸들러 사용 불가 (서버에서 실행되므로)- 클라이언트 컴포넌트와 함께 사용 가능: 서버 컴포넌트가 클라이언트 컴포넌트를 자식으로 가질 수 있음
서버 컴포넌트 vs 클라이언트 컴포넌트
| 구분 | 서버 컴포넌트 | 클라이언트 컴포넌트 |
|---|---|---|
| 실행 환경 | 서버 | 브라우저 |
| 번들 포함 | 아니오 | 예 |
| 상태·훅 | 불가 | 가능 |
| 데이터 접근 | DB·파일 직접 접근 | API 호출 필요 |
| 선언 방법 | 기본값 | 'use client' 지시어 |
핵심 정리
서버 컴포넌트는 데이터 중심의 정적 UI에 적합하고, 클라이언트 컴포넌트는 인터랙티브한 UI에 적합합니다. SSR과 달리 서버 컴포넌트는 클라이언트로 HTML이 아닌 직렬화된 컴포넌트 트리를 전송합니다.