Server Component와 Client Component 차이

컴포넌트?

데이터(props)를 인자로 받아서, jsx를 리턴하는 자바스크립트 함수를 컴포넌트라고 한다.

1. 실행 환경

서버 컴포넌트
서버에서 렌더링되며, 클라이언트(브라우저)로 전송되는 HTML 또는 React Server Component Payload(RSC Payload) 형태로 제공됩니다.

• 클라이언트 측 JavaScript 번들 크기를 줄여 성능을 최적화합니다.
• 기본적으로 Next.js 14의 모든 컴포넌트는 서버 컴포넌트로 간주됩니다.

클라이언트 컴포넌트

• 클라이언트(브라우저)에서 렌더링되며, 서버에서 사전 렌더링된 후 클라이언트에서 "하이드레이션(hydration)" 과정을 거쳐 인터랙티브해집니다.
• 'use client' 지시어를 파일 상단에 추가하여 정의합니다.

 

2. 주요 특징

서버 컴포넌트

• 데이터 페칭: 서버에서 데이터베이스나 API에 직접 접근 가능. 클라이언트 요청 수를 줄이고, API 키와 같은 민감한 데이터를 안전하게 처리합니다.
• 성능: 서버에서 HTML을 생성해 초기 로드 속도(First Contentful Paint, FCP)를 개선하고, 클라이언트로 전송되는 JavaScript 양을 최소화합니다.
• 캐싱: 서버에서 렌더링된 결과를 캐싱하여 성능과 비용을 최적화할 수 있습니다.
• 제한사항: React 훅(useState, useEffect)이나 이벤트 핸들러(onClick)를 사용할 수 없으며, 브라우저 API(예: localStorage)에 접근 불가.

클라이언트 컴포넌트

• 인터랙티비티: React 훅(useState, useEffect)과 이벤트 핸들러를 사용하여 사용자 인터랙션을 처리합니다.
• 브라우저 API: localStorage, geolocation 같은 브라우저 API에 접근 가능.
• 제한사항: 클라이언트로 전송되는 JavaScript 번들 크기가 커질 수 있으며, 서버에서 직접 데이터 페칭이 불가능하므로 Server Actions나 API 호출이 필요.

 

3. 사용 사례

서버 컴포넌트

• 정적 콘텐츠나 데이터 페칭이 필요한 컴포넌트(예: 블로그 포스트, 제품 목록).
• SEO가 중요한 페이지(검색 엔진 봇이 렌더링된 HTML을 바로 인덱싱 가능).
• 민감한 데이터를 서버에서 처리해야 하는 경우(예: API 키, 데이터베이스 쿼리).
• 인터렉션이 없는 UI 적합

클라이언트 컴포넌트

• 사용자 입력(폼, 버튼 클릭)이나 동적 UI(모달, 드롭다운)를 처리하는 경우.
• 브라우저 API를 사용하는 기능(예: 로컬 스토리지, geolocation).

 

4. 컴포넌트 간 상호작용

• 서버 컴포넌트는 클라이언트 컴포넌트를 자식으로 포함할 수 있다.
• 클라이언트 컴포넌트는 서버컴포넌트를 직접 import 해서 사용할 수 없고, 서버 컴포넌트를 props나 자식으로 받아서 사용 할 수있다.

 

5. 데이터 페칭 방식

서버 컴포넌트

• fetch나 React의 cache 함수를 사용해 서버에서 데이터를 가져옵니다.
• 캐싱과 성능 최적화가 용이하며, 클라이언트 요청을 줄입니다.

클라이언트 컴포넌트

• Server Actions를 사용하거나, SWR 같은 라이브러리로 클라이언트에서 데이터를 페칭합니다.
• 사용자 인터랙션(예: "장바구니에 추가" 버튼 클릭)에 따라 데이터를 업데이트할 때 유용.

 

6. 렌더링 흐름

서버 컴포넌트

• 서버에서 렌더링된 HTML이 클라이언트로 전송되어 즉시 표시.
• RSC Payload를 통해 클라이언트와 서버 간 트리를 조정.

클라이언트 컴포넌트

• 서버에서 사전 렌더링된 HTML이 클라이언트로 전송된 후, JavaScript 번들을 다운로드하고 하이드레이션 과정을 거쳐 인터랙티브해짐.

 

7. 장단점 요약

특성	서버컴포넌트	클라이언트 컴포넌트
렌더링 위치	서버	클라이언트 (사전 렌더링 후 하이드레이션)
React 훅 사용	불가	가능
브라우저 API	불가	가능
데이터 페칭	서버에서 직접 가능	Server Actions 또는 API 호출 필요
성능	적은 JavaScript, 빠른 초기 로드	JavaScript 번들 크기 증가 가능
보안	민감 데이터 처리 적합	클라이언트로 노출 가능성 주의
사용 사례	정적 UI, SEO, 데이터 페칭	인터랙티브 UI, 사용자 이벤트 처리