[React]🔥React Server Components(RSC)의 등장과 미래

0. 들어가며

React는 2013년 등장 이후, 프론트엔드 개발 방식에 큰 변화를 가져왔습니다.

하지만 사용자 경험과 성능을 동시에 챙기기란 여전히 쉽지 않았습니다.

 

**React Server Components(이하 RSC)**는 바로 이 문제를 해결하기 위해 등장했습니다.

 

서버에서 렌더링되는 컴포넌트를 도입함으로써, 클라이언트의 부담은 줄이고 성능은 극대화할 수 있도록 돕는 혁신적인 기능입니다.

 

 

 

 

---

❓1. RSC란 무엇인가?

RSC는 서버에서 실행되는 React 컴포넌트입니다.
클라이언트로 전송되지 않고, 서버에서만 렌더링되어 HTML로 변환된 후 브라우저로 전달됩니다.

• 기존 CSR(Component Side Rendering): 모든 코드를 브라우저로 전송 → 번들 사이즈 ↑
• 기존 SSR(Server Side Rendering): HTML은 서버에서 제공하지만, hydration을 위한 JS 번들 필요
• RSC: 서버에서만 실행되므로 JS 번들 X, 클라이언트 부하 ↓

쉽게 말해:

"React 컴포넌트를 클라이언트가 아니라 서버에서 실행하고, HTML만 넘겨주는 구조"

 

 

 

 

 

---

🧩 2. 클라이언트 컴포넌트와의 차이점

 

항목	Server Component	Client Component
실행 위치	서버	브라우저
번들 전송 여부	❌ JS 번들 없음	✅ JS 번들 전송
상태/이벤트 처리	❌ 불가능	✅ 가능
사용 목적	데이터 패칭, 렌더링 최적화	상호작용, UI 이벤트 처리

 

🔗 서버 컴포넌트는 오직 렌더링에만 집중하고, 상호작용은 클라이언트 컴포넌트에서 처리합니다.

 

 

 

 

---

📦 3. 언제, 왜 RSC를 도입해야 할까?

✅ 장점

1. 성능 향상 – JS 번들 크기 감소
2. 보안성 증가 – 민감한 데이터는 서버에서만 처리 가능
3. 더 빠른 TTFB – 서버에서 HTML을 바로 렌더링
4. 캐싱 최적화 – 서버 단에서 캐싱 처리 용이

 

⚠️ 도입 전 고려할 점

• 서버 환경이 반드시 필요함 (Vercel, Node 기반 서버 등)
• 클라이언트-서버 간 역할 분리를 잘 설계해야 함
• 학습 곡선이 있음 (새로운 렌더링 전략, useServerInsertedHTML 등)

 

 

 

---

⚙️ 4. 예시 코드: Server + Client 컴포넌트

// app/components/ServerOnlyComponent.tsx
// server component
import db from '@/lib/db';

export default async function ServerOnlyComponent() {
  const posts = await db.post.findMany();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/components/ClientComponent.tsx
'use client';

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

 

🚨 use client 지시어를 사용해야 클라이언트 컴포넌트로 처리됩니다.
반대로 server component는 기본적으로 서버에서 렌더링됩니다.

 

 

 

 

---

🔮 5. RSC 의 미래

React 공식은 RSC를 통해 "서버 퍼스트(Server-first)" 아키텍처로의 전환을 예고하고 있습니다.

특히 Next.js 13/14 App Router는 RSC를 완전히 지원하며, 앞으로의 React 생태계는 RSC 중심으로 재편될 가능성이 큽니다.

기존 CSR 중심 개발자는 점진적으로 서버 중심 렌더링으로 옮겨가는 것이 바람직합니다.

 

 

 

 

---

✅ 6. 마무리하며

React Server Components는 아직 발전 중이지만, 분명히 미래의 웹 아키텍처에 중심 역할을 할 기능입니다.
클라이언트와 서버를 적절히 나누어 효율적인 웹 앱을 만들고 싶다면, 지금부터 RSC에 익숙해지는 것이 큰 도움이 될 것입니다.

 

 

 

 

 

 

 

 

 

📚 참고 링크

• React 공식 Docs - Server Components
• Next.js Docs - App Router