[React] 리액트 서버 컴포넌트(RSC)와 서버 사이드 렌더링(SSR)

2020년 말, 리액트 팀은 ‘제로 번들 사이즈 React 서버 컴포넌트’ 개념을 도입했다.

 

서버 컴포넌트란?

리액트 서버 컴포넌트는 리액트 18 버전에서 추가된 기능이며, 서버 측에서 페이지가 아닌 컴포넌트를 실행하여 미리 렌더링된 마크업을 생성후, 클라이언트에게 전달되어 사용자에게 콘텐츠를 보여주는 방식이다.

Next.js 12까지는 페이지 단위의 컴포넌트에서만 백엔드 리소스에 접근이 가능했지만, 13부터는 RSC를 사용하게 되면서 페이지 단위가 아닌 컴포넌트 단위에서 서버에 접근이 가능해졌다!

 

리액트 팀에서 제공한 리액트 트리

 

제로 번들 사이즈란?

 

프론트엔드를 개발하면서 라이브러리들을 추가하다 보면 번들 사이즈가 늘게 되고, 이는 서비스 성능에 부정적인 영향을 미치게 된다.

요즘은 많은 라이브러리들이 트리 셰이킹(아래 설명 참고)을 지원하고 필요에 따라 코드 스플리팅(아래 설명 참고)으로 렌더링에 필요한 번들 사이즈를 최대한 줄일 수 있지만 결국 사이즈가 늘어나는 것을 막을 순 없다.

하지만 서버 컴포넌트를 이용하면 서버에서 미리 렌더링된 데이터를 내려받아 자바스크립트를 추가로 받지 않아도 된다. 이 때문에 패키지를 추가하더라도 번들 사이즈에 크게 영향을 주지 않아 '제로 번들 사이즈'라고 한다. 

이는 서버 사이드 렌더링을 보완한다. 두 기능을 함께 사용하게 되면, SSR 인프라가 초기 페인트 속도는 여전히 빠르게 유지하면서, RCS가 기존 클라이언트 사이드의 컴포넌트를 서버측에서 렌더링 하게 한다.

 

트리 셰이킹

트리 쉐이킹은 모듈을 번들링하는 과정에서 불필요한 코드(사용되지 않는 모듈)를 식별하고 제거하는 코드 최적화 기법이다.

 

코드 스플리팅

참고 ⬇️

[react][next.js] 코드 스플리팅(code spliting)과 리액트 서버 컴포넌트(RSC)

 

SSR과 RSC의 주요 차이점

1. 렌더링 단위:
   • SSR: 전체 페이지를 서버에서 렌더링.
   • RSC: 특정 컴포넌트를 서버에서 렌더링.
2. 데이터 전달 방식:
   • SSR: 전체 HTML 페이지를 서버에서 클라이언트로 전달.
   • RSC: 개별 컴포넌트의 HTML을 서버에서 클라이언트로 전달. 클라이언트는 이 HTML을 사용해 페이지를 구성한다.
3. 클라이언트 측의 역할:
   • SSR: 클라이언트는 서버에서 전달된 HTML을 그대로 표시하고, 필요 시 추가적인 JavaScript를 실행한다.
   • RSC: 클라이언트는 서버에서 전달된 컴포넌트 HTML을 받아서 페이지를 구성하고, 추가적인 인터랙션을 위해 JavaScript를 실행한다.

현재 Next.js 14는 이 두가지 방법을 모두 지원하며, 현업에서는 대부분 페이지 라우팅 방식에 익숙하기 때문에 이를 선호한다는 것 같다.

 

RSC에서 작성할 수 없는 코드

RSC는 번들 사이즈를 줄여주고, SSR을 보완해 SEO 측면에서도 유리하지만 작성할 수 있는 코드가 제한적이다. 서버에서 렌더링된 컴포넌트는 직렬화 가능한 상태로 클라이언트에게 데이터가 전달된다.

 

직렬화는 보통 JSON 형태로 변환하는 것이 일반적이다. 직렬화 가능한 데이터는 문자열, 숫자, 객체, 배열 등으로 함수(Function), 날짜(Date)객체 등의 특정 데이터 유형은 JSON으로 직렬화할 수 없다. 따라서 서버 컴포넌트에서는 이러한 코드 작성이 제한된다.

 

특히 useState, useReducer 등 상태관리 훅은 클라이언트에서 관리되므로 불가능하다. 그리고 useEffect, DOM, 브라우저 API 등 브라우저와 관련되거나 브라우저 환경에서 실행되는 기능들은 불가능하다.

 

Next.js 13 이후

Next.js 13 버전 이후에는 app directory를 사용하여 디렉토리 기반 라우팅을 통해 서버 컴포넌트를 더 쉽게 구현할 수 있게 되었다. 또한 13부터는 서버 컴포넌트를 기본으로 작동하는 앱 라우터 방식을 사용하므로 클라이언트 전용 코드는 파일의 가장 위쪽에

use client;

 

를 적어 명시해야 한다. 이렇듯 앱 라우팅에서의 리액트 트리에서는 서버 컴포넌트와 클라이언트 컴포넌트가 함께 사용된다. RSC의 장점과 단점을 생각하며 실제 프로젝트에서 유의하여 활용해보자!

 

.

.

.

.

참고자료

 

React Server Components – React

React Labs: What We've Been Working On – March 2023 – React

React 18: 리액트 서버 컴포넌트 준비하기 | 카카오페이 기술 블로그

React Server Components