SSR과 RSC의 차이

이전에 리액트 서버 컴포넌트(RSC)에 대해 정리했는데 SSR과 어떤 차이점이 있는 지 궁금증이 생겨 간단하게 정리하고자 한다.

SSR(Server-Side-Rendering)

서버사이드 렌더링은 서버사이드에서 미리 HTML을 만들어 클라이언트(브라우저)에 전송하는 것을 말한다.

Next.js 기준으로 설명을 다시 하자면 서버사이드에서 Pre-rendering 방식으로 HTML을 서버에서 미리 만들고 클라이언트에 전달하는데

클라이언트는 전달 받은 JS 번들과 HTML을 통해 hydration 과정을 거쳐 페이지가 상호 작용할 수 있도록 한다. (csr, ssr의 장점만을 가지고 있는 것이다)

hydrate란?

서버에서 렌더링된 HTML 마크업에 기반하여 클라이언트 측에서 자바스크립트 이벤트와 상태를 연결하는 과정

즉, hydration을 통해 페이지가 인터렉션할 수 있게 되는 것이다.

---

React Server Component(RSC)

클라이언트에 HTML을 전달해주는 서버사이드 렌더링과 달리 RSC는 서버에서 렌더링 후 클라이언트에 직렬화된 JSON 형태 데이터를 전달해준다.

실제 Next.js 기반 프로젝트 내 확인해보면 다음과 같이 직렬화된 데이터를 확인할 수 있다.

직렬화된 데이터를 보면 서버 컴포넌트의 정보가 있고 클라이언트 컴포넌트는 직렬화 데이터 내에 참조형으로 표시되어 있는 것도 확인할 수 있다.

기존 Next.js 13 버전 이전에서는 getSeverSideProps는 Page 컴포넌트에서만 사용하여 백엔드에 접근할 수 있었지만 서버 컴포넌트를 사용하면 어디에서든 백엔드에 접근할 수 있다.