NextJS에서 서버 컴포넌트를 렌더링하는 방법

기존 렌더링

  1. 접속시 유저는 빈 화면의 index.html을 받는다.
  2. index.html 내에 링크 되어있는 번들 파일을 요청한다.
  3. react가 실행된다.
  4. reconcile (재조정) 과정이 진행된다.
  5. DOM에 렌더링 한다.

NextJS 렌더링

NextJS에서의 렌더링은 청크 단위로 이루어진다.
이 때, 청크를 나누는 기준은 Route Segment와 Suspense Boundaries이다.

분리된 청크는 NextJS에서 React API를 사용하여 서버에서 RSC(React Server Component) Payload로 생성해준다.

RSC Payload란?
React Server Component를 그리기 위한 바이너리 형태의 트리. 이 객체는 클라이언트에서 브라우저에 DOM을 업데이트하기 위해서 사용된다.

RSC Payload의 구성요소는 다음과 같다.

  • Server Component의 렌더링된 결과
  • Client Component의 Javascript 파일의 위치 (Placeholder라고도 부르며, 렌더링 된 결과는 포함되지 않는다.)
  • Server Component에서 Client Component로 전달하는 Props 정보

그 후, NextJS는 RSC Payload와 Client Component Javascript Instructions를 이용해 미리보기 HTML을 렌더링 한다.

Client Component Javascript란?
useState나 onClick와 같이 Client Component에서 사용되는 정보를 포함하는 객체이다.

RSC Payload 정보는 인라인 JS 태그 내에 위치하며, Client Component Javascript Instructions는 useState의 기본값 등 초기 렌더링에 필요한 값들만 일부 참조한다.

이때 까지가 서버에서의 작업이었고,
생성된 HTML 파일을 클라이언트가 전달받았을 때,

브라우저에서 HTML 내용을 즉시 렌더링하여 사용자에게 보여준다.
그 후, 인라인 JS 태그 내에 있는 RSC Payload를 통해 재조정 과정을 거친다.

Reconcile (재조정) 이란?
Server Component와 Client Component의 정보를 결합하여 Render Tree를 생성하고, 이 Render Tree를 이용해 VDOM을 구성한 후 DOM과 Sync를 맞추는 과정이다.

마지막으로 서버에서 생성된 Client Component Javascript Instructions를 요청하여 hydrate 과정으로 마무리된다.

좀 더 공부가 필요한 부분

Reconcile 과정과 Hydrate 과정 상세화

마지막 수정일: