React Server Components 제대로 이해하기

들어가며

React 18에서 React Server Components(RSC)라는 새로운 패러다임이 소개됐습니다. 기존 SSR과 혼동되기 쉽지만 근본적으로 다른 개념이에요. 이 글에서는 RSC가 무엇인지, 왜 필요한지, 실제로 어떻게 사용하는지 정리해봤습니다.

SSR(Server-Side Rendering)은 서버에서 HTML을 생성해 클라이언트에 전달하고, 클라이언트에서 hydration을 통해 인터랙티브하게 만드는 방식입니다. 컴포넌트의 JavaScript 번들은 여전히 클라이언트로 전송됩니다.

반면 RSC는 서버에서만 실행되는 컴포넌트입니다. 이 컴포넌트의 JavaScript는 클라이언트 번들에 포함되지 않습니다. 서버에서 렌더링된 결과(React 트리의 직렬화된 형태)만 클라이언트로 전달됩니다.

Next.js 13+ App Router에서는 모든 컴포넌트가 기본적으로 Server Component로 동작합니다. 클라이언트 인터랙션이 필요한 경우에만 "use client" 지시어를 추가합니다.

이 패턴의 핵심은 "서버에서 할 수 있는 건 서버에서"라는 원칙입니다. 데이터 fetching, 무거운 라이브러리 사용, 민감한 로직 등을 서버에 두고 클라이언트에는 최소한의 인터랙션 코드만 보내는 거죠.

RSC를 이해하면 "이 코드가 어디서 실행되는가?"를 항상 의식하게 됩니다. 이 사고방식이 더 나은 성능과 사용자 경험으로 이어진다고 생각합니다.