RSC: RSC와 SSR의 비교

윤뿔소·2023년 11월 8일

React

목록 보기

2/2

지금 Next.JS App Router를 사용하면서 'use client' 등의 지시어를 많이 사용한다. 이게 다 RSC 개념이 나오면서 생긴 기능들이다.
RSC를 모르던 그 전엔 어떻게 작성해야할지 몰라 헤맸던 기억이 있다. 그래서 RSC에 대한 개념을 가장 많이 헷갈려 배워야겠다고 생각해 이 글을 작성했다.
React 18에서 출범한, 가장 핫한 기능인 React Server Components(RSC)에 대해서 작성해보겠다.

RSC(React Server Components)란?

React 18에서 도입된 새로운 기능.
서버와 클라이언트 간의 협력을 통해 React 애플리케이션을 렌더링하는 방식을 변화시킴. RSC를 사용하면 일부 컴포넌트를 서버에서, 나머지를 클라이언트에서 렌더링할 수 있게 해주어 페이지 로드 성능 및 번들 크기 등에 대한 개선을 가능케 하는 기능.

RSC는 현재 React 18의 실험적인 기능 중 하나였고, 지금은 Stable한 기능으로 도입됐고, 서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 사용하는 등의 새로운 개념으로 출범됐다.

SSR이랑 뭐가 다른데?

RSC가 서버에서 렌더링해 온다는 것을 알았다. 그렇다면 SSR이랑 똑같지 않은가? 뭐가 다를까?

결론부터 말하자면 SSR과 RSC는 확연하게 다르다. SSR은 HTML, RSC는 RSC Payload라는 JSON 포맷으로 온다.
다시 말해, SSR은 초기 렌더링을 서버에서 처리하고 클라이언트에서 JS 코드를 추가해 상호 작용을 추가하는 반면, RSC는 서버에서 생성된 React 엘리먼트를 직렬화(RSC Payload)하여 클라이언트로 전송하고, 클라이언트에서 초기 렌더링 및 확장을 수행하는 형태라고 보면 된다.

즉, 개념적으로 비슷할 뿐이지. 메커니즘이나 전송 결과물 등의 차이가 있다.

그러면 RSC를 왜 쓰는데?

PHP 등의 SSR 방식보다 더 풍부한 상호 작용과 더 나은 UX를 위해 CSR을 도입했다. 그리고 우리는 그동안 CSR 방식과 구 리액트를 사용하여 JS만을 사용해 엘리멘트 및 상호 작용을 추가해왔다.

하지만 CSR 방식을 따르는 프로젝트가 고도화 되면서 단점이 생겼다.

초기 로딩 증가: 초기에 모든 페이지의 자바스크립트 코드를 다운로드하고 실행한 후에 컴포넌트를 렌더링함. 이로 인해 초기 로딩 속도가 느려짐.
큰 자바스크립트 번들: 모든 클라이언트 코드가 브라우저에 로드되기 때문에 번들 크기가 크고, 모든 컴포넌트 코드를 한 번에 다운로드해야 함.

이러한 문제로 단점을 좀 보완할 방도들을 해결하려고 노력했다. Next.JS 등의 프레임워크들이 대표적인 예다.

여기서 리액트도 같이 노력을 기울였다. 그게 RSC다. SSR의 개념 및 장점을 도입하면서도 클라이언트 코드와 비슷하게 해 좀 더 고도화하기 위해 노력했다.

RSC를 쓰면서 나오는 효과는 아래와 같다.

초기 로딩 속도 향상
RSC를 사용하면 서버에서 초기 렌더링을 수행하고 직렬화된 React 엘리먼트를 클라이언트로 전송함으로써 초기 로딩 속도를 향상시킬 수 있음. 사용자는 초기 페이지 로딩 시 빠른 성능을 얻을 수 있음.
작은 자바스크립트 번들
RSC를 통해 서버에서 렌더링된 컴포넌트를 클라이언트로 전송하면, 클라이언트는 해당 컴포넌트의 JS 코드를 동적으로 가져오게 됨. 이는 전체 애플리케이션을 미리 로드하지 않고 필요한 부분만을 가져와서 작은 자바스크립트 번들을 유지할 수 있게 함.
서버와 클라이언트의 동일한 코드베이스
RSC를 사용하면 서버와 클라이언트 간에 동일한 React 컴포넌트 코드를 공유할 수 있음. 이는 코드를 중복 작성하지 않고도 두 환경에서 동일한 렌더링 로직을 사용할 수 있게 해줌.
동적 데이터 로딩
RSC는 Suspense를 통해 동적 데이터를 효과적으로 로드할 수 있음. 서버 컴포넌트가 필요한 데이터를 비동기적으로 가져오고, 클라이언트는 이 데이터를 받아서 렌더링을 확장할 수 있음.

이러한 이유로, RSC는 초기 로딩 성능 향상과 유연한 코드 구조를 제공하여 React 애플리케이션의 개발 경험을 향상시키는 데 사용될 수 있다.