등장 배경

기존 React는 클라이언트 사이드 렌더링(Client-Side Rendering, CSR) 방식을 사용하며, 이에 따른 몇 가지 한계가 존재했다.

1. 초기 로딩 속도 문제
   • 클라이언트가 렌더링을 수행하기 위해 모든 JavaScript 파일을 다운로드하고 실행해야 하므로, 초기 로딩이 느림.
2. 데이터 패칭 구조의 비효율성
   • 컴포넌트 단위로 데이터를 요청하면 서버 요청이 많아지고, 부모 컴포넌트가 데이터를 받아오기 전까지 자식 컴포넌트의 렌더링이 지연됨.
   • 이로 인해 waterfall 요청(연속된 client-server API 요청과 중첩된 요청 지연)이 발생하여 사용자 경험이 저하됨.

이러한 문제를 해결하기 위해 등장한 서버 사이드 렌더링(Server-Side Rendering, SSR) 은 서버에서 미리 HTML을 생성해 클라이언트로 전송하는 방식이다. 이를 통해 빈 화면 문제를 해결하고 SEO를 개선할 수 있었지만, SSR에도 한계가 존재했다.

1. 서버 부하 증가
   • 페이지 요청마다 서버에서 HTML을 생성해야 해서 리소스 소비가 큼.
2. Hydration 비용 증가
   • 서버에서 생성된 HTML을 클라이언트에서 다시 React 컴포넌트로 변환하는 과정이 필요함.
3. 블로킹 문제
   • 데이터 패칭이 오래 걸릴 경우 전체 페이지 렌더링이 지연되고, 사용자 상호작용까지 딜레이됨.

이러한 한계를 극복하기 위해 HTML Streaming 개념이 도입되었으며, 이를 가능하게 하는 기술이 바로 React Server Components(RSC) 이다.

React Server Component(RSC)

React Server Components(RSC)는 서버에서 페이지의 정적인 부분을 렌더링(Render Tree HTML)한 후 클라이언트로 전달하는 방식을 사용한다. 이와 동시에 나머지 동적인 데이터는 서버에서 호출된 응답 순서대로 직렬화된 binary 데이터 형태(RSC payload)로 클라이언트에 **스트리밍(Streaming HTML)**되며, 클라이언트 단에서 이를 이용해 빠르게 컴포넌트를 렌더링한다.

사용법은 단순하다. 리액트 19 버전에서 컴포넌트는 기본적으로 서버 컴포넌트 방식으로 동작한다. 이전의 클라이언트 컴포넌트 방식을 사용하고 싶다면, 'use client'라는 디렉티브를 스크립트 최상단에 추가해주면 된다.