[React] RSC VS SSR 무슨 차이가 있을까?

 

RSC VS SSR 무슨 차이가 있을까?

 

 

 

포스팅 하게 된 계기

 

유튜브에서 프론트관련 영상을 보던중 RSC라는 단어를 처음 들어서 검색하던 중 React와 관련된 내용인데 React를 사용하는 입장에서 처음 들어보는 단어이기에 흥미가 생겨 찾아보기 시작했습니다.

 

필자는 Next.js App router를 사용해 프로젝트를 진행해본 경험이 있습니다.

App router를 사용해본 사람은 'use client'를 무조건 보고 사용해 본 경험이 있을겁니다. 이러한 지시어가 RSC에서 온 개념 생기면서 나오면서 생긴 기능이라는 말이 흥미로웠습니다.

 

React18에서 새롭게 등장한 가장 핫한 기능인 React Server Component(RSC)에 대해 작성해보겠습니다.

 

React Server Component(RSC)란 무엇일까?

React 18에서 도입된 새로운 기능으로
서버와 클라이언트 간의 협력을 통해 React 애플리케이션을 렌더링하는 방식을 변화시킴.

RSC를 사용하면 일부 컴포넌트를 서버에서, 나머지를 클라이언트에서 렌더링할 수 있게 해주어
페이지 로드 성능 및 번들 크기 등에 대한 개선을 가능케 하는 기능.

+) 페이로드(Payload)란
- 사용에 있어서 전송되는 데이터
- 전송의 목적이 되는 데이터의 일부분으로 함께 전송되는 헤더와 메타데이터와 같은 데이터는 제외함

참고: https://ssue95.tistory.com/30

 

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

 

 

그렇다면 SSR이랑 비교하는 내용의 글들이 많은데

 

SSR이랑 뭐가 다를까?

앞선 내용을 통해 RSC가 서버에서 렌더링해 온다는 것을 알았습니다. 그런데 이 말은 SSR이랑 똑같지 않나?라는 생각을 하게되었습니다.

뭐가 다를까?

 

SSR은 HTML, RSC는 RSC Payload라는 JSON 포맷형식으로 옵니다.

즉, 이 말은 SSR은 초기 렌더링을 서버에서 처리하고 클라이언트에서 JS 코드를 추가해 상호 작용을 추가하는 반면,

RSC는 서버에서 생성된 React 엘리먼트를 직렬화 (RSC Payload)하여 클라이언트로 전송하고, 클라이언트에서 초기 렌더링 및 확장을 수행하는 형태라고 보면 됩니다.

 

개념적으로 비슷할 뿐이지. 매커니즘이나 전송 결과물 등의 차이가 있다는 것을 알게 되었습니다.

 

RSC Payload 를 통해 hydrate 가 진행되고 라우팅 기능이 존재하는 인터렉티브한 웹 앱을 생성 할 수 있다.

관련 좋은 글 추천: 여기 클릭!

그러면 RSC를 왜 사용할까?

사전 지식 필요 - 여기 클릭!

과거 PHP나 JSP를 기반으로 대부분의 웹 애플리케이션은 대부분의 렌더링이 서버 사이드에서 이루어졌습니다. 과거의 SSR 방식보다 더 풍부한 상호 작용과 더 나은 UX를 위해 CSR이 도입되었습니다. (위 링크 참고)

그리고 지금까지 CSR 방식과 (구) React를 사용하여 JS만을 사용해 엘리먼트 및 사용작용을 추가해왔습니다.

 

하지만 CSR 방식에 단점이 생겼습니다.

1. 초기 로딩 속도 증가
초기에 모든 페이지의 자바스크립트 코드를 다운로드하고 실행한 후에 컴포넌트를 렌더링함. 이로 인해 초기 로딩 속도가 느려짐.

2. 큰 JS 번들사이즈
모든 클라이언트 코드가 브라우저에 로드되기 때문에 번들 크기가 크고, 모든 컴포넌트 코드를 한 번에 다운로드해야 함.

 

이외에도 더 많은 단점이 있습니다.

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

여기서 리액트도 같이 노력을 기울였습니다.

 

그 결과가 바로 RSC입니다.

SSR의 개념 및 장점을 도입하면서도 클라이언트 코드와 비슷하게 해 좀 더 고도화하기 위해 노력했습니다.

 

RSC의 효과

1. 초기 로딩 속도 감소
RSC를 사용하면 서버에서 초기 렌더링을 수행하고 직렬화된 React 엘리먼트를 클라이언트로 전송함으로써 초기 로딩 속도를 향상시킬 수 있음.
사용자는 초기 페이지 로딩 시 빠른 성능을 얻을 수 있음.

2. 작은 JS 번들사이즈
RSC를 통해 서버에서 렌더링된 컴포넌트를 클라이언트로 전송하면, 클라이언트는 해당 컴포넌트의 JS 코드를 동적으로 가져오게 됨.
이는 전체 애플리케이션을 미리 로드하지 않고 필요한 부분만을 가져와서 작은 자바스크립트 번들을 유지할 수 있게 함.

3. 서버와 클라이언트의 동일한 코드베이스
RSC를 사용하면 서버와 클라이언트 간에 동일한 React 컴포넌트 코드를 공유할 수 있음.
이는 코드를 중복 작성하지 않고도 두 환경에서 동일한 렌더링 로직을 사용할 수 있게 해줌.

4. 동적 데이터 로딩
RSC는 Suspense를 통해 동적 데이터를 효과적으로 로드할 수 있음.
서버 컴포넌트가 필요한 데이터를 비동기적으로 가져오고, 클라이언트는 이 데이터를 받아서 렌더링을 확장할 수 있음.

 

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

 

 

참고

https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components