[Week 5] SSR과 RSC

1. SSR (Server-Side Rendering)

SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 클라이언트 단이 아닌 서버에서 이루어지는 아키텍처를 말한다.

하지만, 일반적으로 지금의 SSR은 첫 HTML 렌더링은 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리하는 하이브리드 형태의 SSR을 가리킨다.

 

CSR (Client-Side Rendering)과 SSR의 비교

CSR

 

SSR

 

기존에는 CSR (Client-Side Rendering) 방식이 보편적이었다. CSR이란 Client Side Rendering의 약자로, 사용자의 화면에 JavaScript 번들이 모두 다운로드된 후 첫 렌더링이 실행되고, 인증 및 데이터 요청과 같은 과정이 뒤따르는 방식이다. 하지만, 이 방식은 화면 렌더링 시간이 길어지는 단점이 있다.

SSR은 이러한 문제를 보완하기 위해 첫 HTML 렌더링을 서버에서 처리한다. 서버는 완성된 HTML 파일과 함께 HTML을 동적으로 제어할 수 있는 JavaScript 번들을 클라이언트로 전달한다. 이를 통해 FCP (First Contentful Paint) 시간이 단축되고, 사용자 입장에서 최초 로딩 시간이 줄어드는 효과를 얻을 수 있다.

 

1. First Contentful Paint (FCP)

: 일반적인 레이아웃은 렌더링 되었지만 콘텐츠는 누락된 상태

2. Time To Interactive (TTI)

: 웹 페이지가 완전한 상호작용이 가능(interactive)하게 되는 시점

JavaScript 번들이 다운로드 되었고, Hydration 과정을 통해 유저가 인터렉티브 할 수 있는 단계

3. Largest Contentful Paint (LCP)

: 페이지에서 가장 용량이 큰 컨텐츠가 표시되는 시점, 데이터베이스에서 데이터를 가져와 Content가 UI에 렌더링된 상태

 

SSR의 단점

SSR(Server-Side Rendering)은 UX를 개선하고 초기 로딩 성능을 향상시켜주지만, 몇 가지 단점이 존재한다.

1. 초기 서버 부하
   SSR에서는 요청이 들어올 때마다 서버에서 HTML을 생성한다. 이는 요청마다 데이터를 가져오고, 템플릿을 렌더링하며, 완성된 HTML을 반환하는 작업이 포함되므로 트래픽이 많아질수록 서버에 부하가 집중되어 성능 저하로 이어질 수 있다.
2. TTVB(Time To Viewport Blocker)
   SSR로 HTML이 초기 로드되더라도, JavaScript 번들의 크기가 크면 상호작용 가능한 상태에 도달하기까지 시간이 지연될 수 있다. 즉, FCP는 개선되지만 TTI까지의 시간이 길어지는 것이다.

 

2. RSC (React Server Components)

RSC(React Server Components)는 React 18에서 도입된 새로운 기능으로, 서버에서만 렌더링되는 컴포넌트를 뜻한다.

 

 

RSC의 특징

1. 서버 중심 로직 처리
   기존 SSR은 페이지 전체를 서버에서 렌더링했다면, RSC는 특정 컴포넌트 단위로 서버 렌더링을 수행한다.
   필요한 데이터만 서버에서 처리하므로 클라이언트의 부담이 감소한다.
2. 번들 크기 감소
   서버 컴포넌트는 JavaScript 번들로 포함되지 않아 클라이언트에서 로드해야 할 JavaScript 크기가 감소한다.
3. TTI 단축
   RSC는 클라이언트에서 필요하지 않은 컴포넌트에 대해 Hydration을 수행하지 않으므로, TTI를 단축할 수 있다.

처음에는 SSR의 단점을 RSC가 극복하는 것 같아 SSR 대신 RSC를 사용하는 게 좋은 방식인 건가? 라는 생각을 했다.

하지만, 대체재로 생각하기 보다는 보완의 수단으로 사용하는 것이 좋다고 한다.

(SSR로 초기 HTML 페이지 렌더링하고, RSC로는 클라이언트로 전송되는 자바스크립트 번들 사이즈를 감소시키기)

 

SSR과의 차이점

• 코드 전달 방식
  • SSR: 모든 컴포넌트의 코드가 JavaScript 번들로 클라이언트에 전달된다.
  • RSC: RSC의 코드는 클라이언트로 전달되지 않으며 서버에서만 처리된다.
• 백엔드 리소스 접근
  • SSR: 서버 데이터에 접근하려면 최상위 페이지에서 getServerSideProps나 getInitialProps와 같은 메서드를 사용해야 하며, 세부적인 컴포넌트에서 직접 서버 리소스에 접근하기 어렵다.
  • RSC: 페이지 레벨에 상관없이 모든 컴포넌트에서 서버에 직접 접근할 수 있다.
• Refetch와 상태 유지
  • SSR: 데이터를 갱신하려면 전체 HTML을 서버에서 다시 렌더링해야 하므로 클라이언트 상태를 유지할 수 없다.
  • RSC: RSC Payload라는 특별한 형태로 컴포넌트를 전달하며, 클라이언트 상태(포커스, 입력값 등)를 유지한 채 데이터를 다시 가져오고 렌더링할 수 있다.

 

 

 

 

https://tech.kakaopay.com/post/react-server-components/