프로젝트를 진행하며 서버 컴포넌트에서 라우트 핸들러를 사용하게 되면 빌드 시점에 서버 측 통신에서 해당 라우트 핸들러의 경로를 참조하지 못해 문제가 생긴다는 것을 알았습니다. 이 과정에서 그럼 서버 컴포넌트는 어떤 과정을 통해 렌더링 되는 것인가에 대해 궁금함이 생겼습니다. 그 과정을 공식 문서를 통해 알아보겠습니다.
Rendering: Server Components | Next.js
Learn how you can use React Server Components to render parts of your application on the server.
nextjs.org
서버 컴포넌트의 렌더링 과정
간단하게 onClick 이벤트를 포함하고 있는 클라이언트 컴포넌트를 포함하고 있는 서버 컴포넌트를 통해 알아보겠습니다.
서버(Server)
Next.js는 React의 API를 활용하여 서버에서 렌더링합니다.
렌더링 작업은 라우트 세그먼트(Route Segments) 및 서스펜스 바운더리(Suspense Boundaries) 단위로 청크(Chunk) 로 분리됩니다.
각 청크는 두 단계에 따라 렌더링됩니다.
- React는 서버 컴포넌트를 "React Server Component Payload(RSC Payload)"라는 특별한 데이터 형식으로 렌더링합니다.
- Next.js는 이 RSC Payload와 클라이언트 컴포넌트의 JavaScript 지침을 사용하여 서버에서 HTML을 생성합니다.
RSC (React Server Component) Payload
RSC Payload는 다음 요소를 포함합니다.
- 렌더링된 서버 컴포넌트 데이터
- Placeholder (JavaScript 지침의 위치 및 코드)(ex. .next/chunks/app/rsc/해당 파일 (onClick 코드 조각))
- 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 props
클라이언트(Client)
- 즉각적인 미리보기(Preview) 렌더링
- 서버에서 생성된 HTML이 브라우저에 즉시 표시되지만, 초기 상태에서는 상호작용이 불가능한 비상호작용(non-interactive) 상태로 보입니다.
개발자 창의 네트워크 탭에서 해당 파일의 미리보기를 통해 확인할 수 있습니다.
2. RSC Payload를 활용하여 클라이언트와 서버 컴포넌트 트리를 재조정하고(Virtual DOM), DOM을 업데이트합니다.
3. JavaScript 지침을 통해 클라이언트 컴포넌트가 하이드레이션(Hydration)되어 상호작용이 가능해집니다.
다음엔 클라이언트 컴포넌트 렌더링 과정으로 돌아오겠습니다....
I'll be back...
