Server + Client

초기 화면은 서버, 상호작용은 클라이언트가 맡는다

App Router에서는 페이지의 첫 의미 있는 콘텐츠와 SEO는 서버 컴포넌트가 책임지고, 브라우저 API와 사용자 액션 이후 갱신은 클라이언트 컴포넌트가 담당합니다.

Server Component

페이지 진입 전에 필요한 데이터

렌더링 전에 await가 끝나므로 사용자는 완성된 HTML을 먼저 받습니다.

SEO 콘텐츠 게시글 본문, 상품명, 문서처럼 검색과 공유에 필요한 값
비밀 접근 API 키, DB, 내부 서비스 호출처럼 브라우저에 숨길 로직
초기 props 클라이언트 컴포넌트가 이어받아 즉시 표시할 기본 상태
Client Component

브라우저에서만 의미 있는 데이터

마운트 이후 상태와 캐시를 관리하며 사용자 입력에 맞춰 다시 가져옵니다.

사용자 액션 검색, 필터, 댓글 등록 후 목록 갱신처럼 즉시 반응할 값
브라우저 API localStorage, geolocation, WebSocket처럼 서버에 없는 기능
SWR 캐시 로딩, 에러, 재검증, 포커스 시 갱신을 라이브러리로 위임