React 19 Server Components 실전 도입 가이드 — 기존 SPA 마이그레이션 체크리스트 2026

React 19의 Server Components(RSC)는 2025년 안정화를 거쳐 2026년 현재 Next.js·Remix·Waku 등 주요 프레임워크 기본값이 되었습니다. 기존 SPA를 RSC 기반으로 마이그레이션하는 실전 가이드입니다.

Server Components 핵심 개념

• 서버에서만 실행: fetch·DB 쿼리·파일 시스템 접근 가능
• 제로 번들 추가: 서버 전용 코드는 브라우저로 전송 안 됨
• Streaming 지원: Suspense 경계마다 점진적 렌더링
• 기본값 서버: Next.js App Router에서 명시 없으면 RSC

use client / use server 경계

// 서버 컴포넌트 (기본값)
export default async function Page() {
  const data = await db.query(...)
  return <ClientButton data={data} />
}

// 클라이언트 컴포넌트
"use client"
export function ClientButton({ data }) {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Click</button>
}

"use client" 위치 원칙: 트리 깊숙한 곳에 놓고, 그 위는 전부 서버로 유지. 인터랙션 필요한 리프만 클라이언트.

SPA → RSC 마이그레이션 체크리스트

1단계: 의존성 정리

• Next.js 15 이상으로 업그레이드 (또는 Remix 2.x)
• 클라이언트 전용 라이브러리 목록화 (상태관리·애니메이션·차트)

2단계: 데이터 페칭 이전

• useEffect + fetch → 서버 컴포넌트 async function 내 직접 호출
• React Query 사용처는 use client 경계 내에서만 유지

3단계: 상태 관리 재설계

• 전역 상태: Context API는 use client로 감싸거나 URL state(searchParams)로 대체
• 폼: Server Actions로 서버 로직 직접 호출
• 서버 사이드 redirect·revalidatePath 적극 활용

4단계: 인터랙션 분리

• 스크롤·애니메이션·모달: use client 별도 컴포넌트
• 정적 UI(헤더·푸터·랜딩 텍스트): 서버 컴포넌트 유지

5단계: 점진 전환

• 페이지 단위로 파일당 마이그레이션 (한 번에 전체 X)
• 기존 pages/ 디렉토리와 App Router 병행 가능

성능 비교 (전후)

이커머스 상품 목록 페이지 기준:

흔한 실수

1. 1모든 곳에 "use client" — 의미 없음. RSC 장점 버림
2. 2서버 컴포넌트에서 useState·useEffect — 컴파일 에러
3. 3민감 로직을 클라이언트로 누수 — 서버 전용 함수에 import "server-only" 추가
4. 4Props에 함수·Date·Class 전달 — 직렬화 안 됨. 서버↔클라이언트 경계는 JSON 가능한 값만

마무리

RSC는 "더 나은 SSR"이 아니라 새 아키텍처입니다. 완전한 전환은 3~6개월 걸리지만 번들 사이즈·성능·개발 경험 모두 개선됩니다. 기존 SPA가 돌아간다면 먼저 새 기능만 RSC로, 그다음 핵심 페이지부터 순차 이전이 안전한 접근입니다.