React Server Components 1년 써보고 정리하는 멘탈 모델

RSC를 처음 접하면 "서버에서 렌더링되는 컴포넌트"라는 설명이 오히려 혼란을 준다. SSR과 뭐가 다른데? 1년 운영해 보고 정착한 멘탈 모델을 공유한다.

HTML이 아니라 데이터를 만든다

SSR은 HTML 문자열을 만들어 보낸다. RSC는 컴포넌트 트리를 직렬화한 데이터(RSC 페이로드)를 보낸다. 클라이언트는 이 데이터를 받아 기존 트리에 병합한다. 그래서 내비게이션 시 화면 전체가 갈리지 않고 바뀐 부분만 교체된다.

서버 컴포넌트는 "실행 위치"가 아니라 "번들 경계"

'use client'가 붙은 파일과 그 import 트리만 브라우저 번들에 들어간다. 서버 컴포넌트의 코드(마크다운 파서, DB 클라이언트, 무거운 유틸)는 클라이언트에 1바이트도 안 간다. 이게 실질적인 성능 이득의 대부분이다.

// 서버 — prisma가 번들에 안 들어감
export default async function Page() {
  const posts = await prisma.post.findMany();
  return <PostList posts={posts} />;
}

경계에서만 직렬화 비용을 낸다

서버 → 클라이언트로 넘기는 props는 직렬화 가능해야 한다. Date는 되고 함수는 안 된다. 거대한 객체를 통째로 넘기지 말고 화면에 필요한 필드만 골라 넘기는 습관이 여기서 중요해진다.

실무에서 정한 규칙

• 페이지/레이아웃은 기본 서버. 데이터 조회는 전부 여기서
• 'use client'는 이벤트 핸들러, useState, 브라우저 API가 필요한 잎(leaf)에만
• 클라이언트 컴포넌트가 서버 데이터를 다시 fetch하지 않도록 props로 내려주기
• children 패턴으로 서버 컴포넌트를 클라이언트 컴포넌트 안에 끼워 넣기

이 네 줄만 지켜도 "왜 번들이 커졌지"와 "왜 이 코드가 브라우저에서 터지지"의 대부분을 예방한다.