React 19에서 정식 출시된 Server Components는 현대 React 개발의 패러다임을 바꿀 만한 기능입니다. 이 글에서는 Server Components가 무엇이고, 기존 SSR과 어떻게 다르며, 실무에서 어떻게 활용할 수 있는지 살펴봅니다.

Server Components란?

Server Components는 서버에서 렌더링되어 클라이언트로 전송되는 React 컴포넌트입니다. 기존 SSR과 가장 큰 차이는 JavaScript 번들에 포함되지 않는다는 점입니다.

Server Components는 클라이언트로 보내지지 않으므로, 데이터베이스 접근이나 파일 시스템 작업을 직접 수행할 수 있습니다.

1. 기본 사용법

Next.js 14+ 환경에서 Server Component는 기본값입니다. 명시적으로 클라이언트 컴포넌트를 만들려면 'use client' 지시어를 추가해야 합니다.

// app/posts/page.tsx (Server Component — 기본)
import { db } from '@/lib/db';

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

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

2. 성능 이점

  • 번들 사이즈 감소: 서버에서만 실행되는 코드는 클라이언트에 전송되지 않음
  • 데이터 페칭 최적화: 컴포넌트 가까이에서 데이터를 가져올 수 있음
  • Streaming SSR: 부분적으로 렌더링된 결과를 점진적으로 전송

3. 주의사항

Server Components는 강력하지만, 몇 가지 함정이 있습니다:

  • useState, useEffect 같은 hook을 사용할 수 없음
  • 이벤트 핸들러를 직접 추가할 수 없음 (클라이언트 컴포넌트로 분리 필요)
  • Context API의 동작 방식이 다름

실무에서는 Server Component와 Client Component를 적절히 분리하는 것이 핵심입니다. UI 인터랙션이 필요한 부분만 클라이언트로 분리하고, 나머지는 서버에 두는 패턴이 가장 효과적입니다.