기존의 컴포넌트가 렌더링 된다는 의미는 컴포넌트가 JSX가 바벨을 통해 ReactElement라는 돔에 표현할 자바스크립트 객체를 반환하고, ReactElement는 Fiber로 확장되고, 가상 돔이라는 트리에 하나의 노드가 된다. 그리고 가상 돔이 실제 돔에 반영이 된다는 것이다.

NextJS는 리액트 기반의 프레임워크이다. 렌더링 work는 청크로 스플릿이 된다. 기준은 라우트 세그먼트와 서스팬스 바운더리 기준으로 스플릿이 나눠진다.

렌더링 웍으로 나눠진 청크는

리액트가 서버 컴포넌트를 리액트 서버 컴포넌트 페이로드라고 불리는 특별한 데이터 포맷으로 렌더링합니다. 결국 RSC Payload는 리액트 서버 컴포넌트 트리를 그리기 위한 바이너리로 브라우저의 Dom을 업데이트 하기 위해 클라이언트가 사용한다.

RSC Payload에는

• 서버 컴포넌트 렌더링 된 결과물
• 빈자리 표시 - RSC가 아닌 클라이언트 컴포넌트가 렌더될 위치에 참조할 수 있는 자바스크립트 파일의 위치
• 서버 컴포넌트가 클라이언트 컴포넌트에 전달하는 props

리액트 서버 컴포넌트가 렌더한다는 것은 RSC Payload를 만드는 것이고, RSC Payload에는 서버 컴포넌트 렌더링의 결과물, 클라이언트 컴포넌트의 렌더 위치와 그 위치에 들어갈 자바스크립트 파일의 위치, 서버 컴포넌트가 클라이언트 컴포넌트에 전달할 props가 담겨져 있다.

NextJS는 React가 렌더해준 RSC 페이로드와 클라이언트 컴포넌트 자바스크립트 인스트럭션을 활용하여 HTML을 렌더한다.

이 위의 과정은 모두 서버에서 일어난다.

그 다음 클라이언트에서는 최초로 서버에서 만든 HTML을 즉시 보여준다. 이것을 preview of the routes 라고 한다.

이후 reconcile 단계에 들어가서 RSC Payload를 통해 클라이언트 컴포넌트에 있는 빈자리 정보를 통해 클라이언트 컴포넌트를 재조정하고, 가상 돔을 완성시킨 후 실제 돔을 완성시킵니다.

그 이후에 hydrate 작업 단계에 돌입하여 자바스크립트 인스트러덕션을 통해 인터랙션 가능하도록 등록하는 과정을 거친다.