SSR과 RSC의 차이

Next.js를 배우고 여러 자료를 읽으면서 종종 SSR이나 RSC 등의 단어를 접했었는데, 좀처럼 이해되지 않아서 개념을 정리해보기로 했다.

 

Server-side rendering(SSR)

서버사이드에서의 서버는 클라이언트 코드가 호스팅되는 서버를 말한다. 깃헙 pages에 내 웹앱을 호스팅한다면 깃헙이 서버인 것이고, Vercel 같은 서비스에 호스팅하면 Vercel의 서버를 쓰는 것이다.

 

서버사이드 렌더링은 클라이언트 코드가 호스팅된 서버에서 내 컴포넌트를 렌더링한다는 뜻이다. 지금까지는 React 컴포넌트를 생성할 때 컨텐츠가 없는 빈 HTML 문서를 먼저 다운로드 받고, HTML 문서 안에 있는 <script> 태그를 읽어 필요한 자바스크립트 파일을 추가로 다운로드해서 DOM 요소들을 자바스크립트를 통해 주입하는 방식을 사용했는데 SSR이 등장하면서 서버에서 미리 HTML 최종본을 만들 수 있게 됐다. SSR의 반대 개념을 클라이언트사이드 렌더링(client-side rendering, CSR)이라고 하는데, 이미 그려진 HTML을 서버에서 전달받는 SSR 방식이 CSR 방식보다 초기 로딩 속도가 훨씬 빠르다.

 

다만 서버는 브라우저 환경이 아니기 때문에 DOM 같은 웹 API에 접근할 수 없다. 따라서 SSR을 하려는데 document.querySelector() 같은 DOM 전용 함수가 포함되어 있으면 예외가 발생한다.

 

만약 렌더링할 페이지에 클릭이나 스크롤 이벤트에 반응할 핸들러 함수들이 필요하다면 SSR로 생성된 HTML 문서를 먼저 클라이언트에 렌더링하고, 이후 자바스크립트 소스를 다운받아 적용하면 된다. 이 부분은 기존에도 사용하고 있던 hydration 프로세스와 동일하다.

 

React server component(RSC)

React의 서버 컴포넌트는 번들링 이전 스텝에서 생성되는 컴포넌트로, SSR을 거치기 전에 다른 독립적인 환경에서 렌더링되는 컴포넌트다. 서버 컴포넌트 자체가 클라이언트로 보내지는 것은 아니고, 서버 컴포넌트가 코드 내 함수들을 모두 실행한 후에 리턴하는 JSX만이 클라이언트에 렌더링된다.

 

아래 공식 문서의 예시 코드를 보면 marked()나 sanitizeHtml() 함수는 앱을 빌드할 때 동작하고, 번들링되는 코드에 포함되지 않는다. 클라이언트에 실제로 전송되는 부분은 sanitizeHtml(marked(content)) 함수를 실행해서 리턴값으로 받은 HTML 컨텐츠뿐이다.

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);
  
  return <div>{sanitizeHtml(marked(content))}</div>;
}

 

 

참고:

• https://react.dev/reference/rsc/server-components
• https://stackoverflow.com/questions/76325862/what-is-the-difference-between-react-server-components-rsc-and-server-side-ren