Server Components vs Client Components

React Server Components(RSC)와 Client Components의 차이점을 실습으로 이해하세요.

← App Router 예제로 돌아가기

🖥️ Server Component

이 컴포넌트는 서버에서만 렌더링됩니다.

Server Time: 2025-12-12T02:01:01.834Z
✅ 데이터베이스 직접 접근 가능
✅ 비밀 환경 변수 안전하게 사용
✅ 클라이언트 JavaScript 번들에 포함되지 않음

💻 Client Component

이 컴포넌트는 클라이언트에서 인터랙티브하게 동작합니다.

useState 사용:
0
이벤트 핸들러:
✅ useState, useEffect 등 React Hooks 사용
✅ 이벤트 리스너 (onClick, onChange 등)
✅ 브라우저 API 접근 (localStorage, window 등)

📚 주요 차이점

특성Server ComponentClient Component
렌더링 위치서버클라이언트 (브라우저)
JavaScript 번들❌ 포함되지 않음✅ 포함됨
React Hooks❌ 사용 불가✅ 사용 가능
이벤트 핸들러❌ 사용 불가✅ 사용 가능
데이터베이스 접근✅ 직접 접근 가능❌ API를 통해서만
환경 변수✅ 서버 환경 변수 접근⚠️ NEXT_PUBLIC_만 접근
선언 방법기본값 (별도 선언 불필요)'use client' 디렉티브

🖥️ Server Component 사용 시나리오

  • ✓데이터베이스에서 직접 데이터 조회
  • ✓비밀 API 키나 토큰 사용
  • ✓큰 용량의 라이브러리를 서버에서만 사용
  • ✓정적 콘텐츠 렌더링 (블로그 포스트 등)
  • ✓SEO 최적화가 중요한 페이지

💻 Client Component 사용 시나리오

  • ✓사용자 인터랙션 (클릭, 입력 등)
  • ✓useState, useEffect 등 React Hooks
  • ✓브라우저 API (localStorage, geolocation 등)
  • ✓실시간 업데이트 (WebSocket, polling 등)
  • ✓커스텀 React Context 사용

💡 Best Practices

1. 기본은 Server Component: 특별한 이유가 없다면 Server Component를 사용하세요. 클라이언트 JavaScript 번들 크기를 줄여 성능이 향상됩니다.
2. Leaf에서 Client Component 사용: 트리의 가장 하위(leaf)에서만 'use client'를 사용하여 클라이언트 컴포넌트의 범위를 최소화하세요.
3. Server Component에서 Client Component로 props 전달: Server Component에서 fetch한 데이터를 Client Component에 props로 전달할 수 있습니다.
4. 직렬화 가능한 데이터만 전달: Server Component에서 Client Component로 전달하는 props는 JSON으로 직렬화 가능해야 합니다 (함수나 클래스 인스턴스는 불가).