React Server Components(RSC) 완벽 가이드

18 Mar 2025

🚀 React Server Components란?

React Server Components(RSC)는 서버에서 실행되는 React 컴포넌트로, 클라이언트에서 불필요한 JavaScript 번들을 줄여 성능을 최적화하는 최신 기술입니다. 이는 React 18에서 도입된 개념으로, 서버와 클라이언트의 역할을 분리하여 더 빠른 페이지 로딩과 사용자 경험 개선을 목표로 합니다.

🎯 React Server Components의 핵심 개념

1️⃣ 서버에서만 실행되는 컴포넌트

브라우저에서 실행되지 않고 서버에서 렌더링됨
클라이언트로 전송되는 JavaScript 크기를 최소화
데이터베이스 및 API 요청을 직접 수행 가능

2️⃣ 클라이언트 컴포넌트와의 차이

특징	서버 컴포넌트 (RSC)	클라이언트 컴포넌트
실행 위치	서버	브라우저
번들 크기	JavaScript 번들에 포함되지 않음	포함됨
상태 관리	useState, useEffect 사용 불가	가능
API 호출	서버에서 직접 수행	fetch() 등 클라이언트에서 요청

3️⃣ 서버와 클라이언트 컴포넌트 혼합 사용

React에서는 서버 컴포넌트와 클라이언트 컴포넌트를 함께 사용할 수 있습니다. 서버에서 데이터를 가져와 렌더링한 후, 인터랙티브한 요소는 클라이언트 컴포넌트로 분리하는 방식입니다.

🛠️ RSC 활용 방법

1️⃣ Next.js에서 RSC 사용하기

Next.js 13 이상 버전에서는 app 디렉토리 내에서 기본적으로 RSC가 활성화됩니다.

📌 서버 컴포넌트 예제

// app/components/ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json());
  return <div>{data.title}</div>;
}

fetch 요청을 서버에서 수행하므로 클라이언트 측 번들 크기가 증가하지 않음

📌 클라이언트 컴포넌트와 함께 사용하기

// app/components/ClientComponent.tsx
"use client";
import { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>클릭 {count}</button>;
}

"use client" 지시어를 추가하면 클라이언트에서 실행되는 컴포넌트가 됨

2️⃣ 서버 컴포넌트에서 클라이언트 컴포넌트 호출

// app/page.tsx
import ServerComponent from "./components/ServerComponent";
import ClientComponent from "./components/ClientComponent";

export default function Page() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

주의: 클라이언트 컴포넌트에서는 서버 전용 기능(API 호출, DB 접근 등)을 직접 수행할 수 없습니다.

⚡ RSC의 장점

✅ 번들 크기 감소 → 불필요한 JavaScript 로딩 제거

✅ 서버 사이드 데이터 처리 → API 호출 및 데이터베이스 접근 최적화

✅ SEO 및 성능 향상 → 더 빠른 페이지 로딩 속도

🚧 RSC 사용 시 주의할 점

❌ useState, useEffect 같은 훅 사용 불가

❌ 브라우저 전용 API(localStorage, window 객체 등) 접근 불가

❌ 서버에서 클라이언트 컴포넌트를 직접 import하면 오류 발생 가능

🎯 결론

React Server Components는 클라이언트 번들을 최적화하고 성능을 극대화하는 강력한 도구입니다. Next.js와 같은 프레임워크에서 RSC를 활용하면, 보다 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다. 앞으로 React 19에서 RSC가 더욱 발전할 예정이므로, 미리 익혀 두면 큰 도움이 될 것입니다! 🚀