React Server Components 이해 — Next.js 통합과 SSR과의 차이

React Server Components(RSC)는 서버와 클라이언트의 장점을 결합한 컴포넌트 모델이다. 클라이언트로 전송되는 JavaScript 번들을 줄이고 점진적 데이터 페칭을 가능하게 해, 기존 SSR의 "클라이언트가 여전히 컴포넌트를 다운로드해야 한다"는 한계를 넘어선다.

핵심 포인트

RSC는 서버에서 렌더링되어 클라이언트 JS 번들에 포함되지 않아 대규모 라이브러리 의존성을 서버에만 둘 수 있다
기존 SSR은 HTML을 빠르게 생성하지만 클라이언트가 여전히 컴포넌트를 다운로드·파싱해야 한다는 한계가 있다
RSC는 "all-or-nothing 데이터 페칭" 트레이드오프를 제거하고 컴포넌트별 독립적 점진적 데이터 페칭을 가능하게 한다
Next.js app 디렉토리에서 페이지와 레이아웃은 기본적으로 Server Components로 렌더링된다
같은 라우트 안에서 Server Component와 Client Component를 함께 사용할 수 있다

상세 정리

RSC 개념: 서버와 클라이언트의 장점을 결합한 컴포넌트 모델이다. 클라이언트 앱의 풍부한 상호작용성과 전통적 서버 렌더링의 성능을 동시에 달성하는 것이 목표다.
클라이언트 번들 감소: 대규모 라이브러리들이 서버에만 머물러 클라이언트로 전송되는 JavaScript 양을 줄인다. 이는 페이지 상호작용 시간(TTI)을 단축하고 Core Web Vitals를 개선한다.
SSR과의 차이: 기존 SSR은 초기 HTML을 빠르게 전달하지만 클라이언트가 여전히 컴포넌트를 다운로드하고 파싱해야 한다. RSC는 서버 컴포넌트가 클라이언트 번들에 아예 포함되지 않아 이 비용을 제거한다.
점진적 데이터 페칭: RSC는 "all-or-nothing 데이터 페칭"의 트레이드오프를 제거한다. 컴포넌트별로 독립적으로 데이터를 페치할 수 있어 워터폴 없는 점진적 로딩이 가능하다.
Next.js app 디렉토리 통합: app 디렉토리의 페이지와 레이아웃은 기본적으로 Server Components로 렌더링된다. 'use client' 지시어로 클라이언트 컴포넌트를 명시적으로 표시한다.
혼합 사용: 같은 라우트 안에서 Server Component와 Client Component를 함께 사용할 수 있다. 상호작용이 필요한 부분만 Client Component로 분리하고 나머지는 서버에서 처리한다.

왜 읽나React Server Components의 개념, SSR과의 근본적 차이, Next.js app 디렉토리에서의 동작 방식을 이해하고 싶은 프런트엔드 엔지니어에게 유용하다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

React Server Components 이해 — Next.js 통합과 SSR과의 차이

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다