서버 컴포넌트와 SSR

사용자가 특정 페이지를 띄우기 위해서 서버로 요청을 날린다. 서버는 이때부터 컴포넌트 트리를 root부터 실행하며 직렬화된 json 형태로 재구성하기 시작한다.
직렬화란: 데이터스 스토리지 문맥에서 데이터 구조나 오브젝트 상태를 동일하거나 다른 컴퓨터 환경에 저장(이를테면 파일이나 메모리 버퍼)하고 나중에 재구성할 수 있는 포맷으로 변환하는 과정이다.

직렬화 과정은 모든 서버 컴포넌트를 실행하여 json 객체 형태의 트리로 재구성할 때까지 진행된다. 이 과정에서 모든 컴포넌트에 대해 진행하는 것이 아니라, 클라이언트 컴포넌트(RCC)일 경우에는 건너뛰게 된다. 정확히 말해 건너뛰는 것이 아니라 "RCC가 렌더링 되는 위치입니다"라는 placeholder를 대신 배치해준다.

출처: https://velog.io/@2ast/React-서버-컴포넌트React-Server-Component에-대한-고찰

RSC vs SSR

서버 컴포넌트와 SSR은 서버에서 처리된다는 공통점 외에는 각각 해결하고자하는 목표도 다르고, 일어나는 시점과 최종 산출물도 다른 별개의 개념이다. 따라서 반드시 둘 중 하나를 선택할 필요도 없고 필요에 따라 RSC와 SSR을 함께 사용하면 큰 시너지를 낼 수 있다.

우리가 작성한 소스코드가 보여지기 위해서는 컴포넌트가 실행되어 데이터가 해석되어야하고, 그 해석된 데이터가 다시 HTML로 변환하는 과정을 거쳐야한다.
CSR은 말 그대로 클라이언트에서 컴포넌트를 렌더링하는 것을 의미한다. 서버에서 빈 html과 js bundle을 다운로드 받고, 이 소스 JS를 클라이언트에서 해석해서 처음부터 그려나가게 된다.
반면 Server Side Rendering은 서버에서 컴포넌트를 해석하여 최종 결과물인 html 파일을 내려주는 것을 의미한다. CSR과는 반대로 초기 로딩속도가 빠르지만, 페이지를 이동할때마다 새로운 html을 요청해서 받는 시간이 필요하고, 현재 화면에서도 작은 변경사항이 발생하면 처음부터 html을 다시 로드해야하기 때문에 스크린간 이동이나 인터렉션에 약점이 있다.

사실 next js에서 우리가 사용하는 ssr은 전통적인 의미의 ssr은 아니다. ssr과 csr의 장점만을 취하기 위해 일종의 절충점을 찾은 형태라고 할 수 있다. 즉, 초기 로딩속도가 느리다는 CSR의 단점을 보완하기 위해 초기 로딩시에는 html파일을 SSR을 통해 빠르게 받아오고, 이와 병렬적으로 js번들도 함께 가져와서 미리 받아온 html과 병합하는 hydration과정을 거치는 것이다. 그 결과 빠른 로딩에 강점이 있는 SSR과 인터렉션에 강점이 있는 CSR의 장점을 모두 취할 수 있게 된다.