Next.js 서버 컴포넌트와 HTML 렌더링에 대한 정확한 이해
· 2 min read
"서버에서 HTML을 만들어서 클라이언트에 보낸다"
이 표현은 전통적인 SSR(서버사이드 렌더링) 방식에선 적절하지만, **Next.js의 서버 컴포넌트(Server Components)**에선 정확하지 않아요.
정확한 표현은? (Next.js RSC 기준)
서버는 React 컴포넌트 트리를 실행하여 RSC Payload라는 직렬화된 데이터 스트림을 생성하고, 브라우저는 이를 기반으로 HTML을 점진적으로 구성하며, 클라이언트 컴포넌트는 hydration 과정을 통해 상호작용을 담당해요.
비교: 전통 SSR vs 서버 컴포넌트 기반 렌더링
| 항목 | 전통 SSR | RSC (Server Components) |
|---|---|---|
| HTML 생성 위치 | 서버에서 완성된 HTML 생성 | 서버에서 React 트리 직렬화 |
| 전송 형태 | 완성된 HTML | HTML 뼈대 + RSC Payload + JS 번들 |
| 동작 방식 | 한 번에 완성된 문서 전달 | <script>로 chunked 페이로드 전달 |
| hydration | 전체 또는 부분 hydration | 클라이언트 컴포넌트만 hydration |
| 브라우저 역할 | 렌더된 HTML 표시 | HTML 구성 + hydration 수행 |
표와 같이 쉽게 이해를 할 수 있어요.
RSC Payload란?
- 서버 컴포넌트의 React 트리 렌더링 결과를 직렬화한 특수한 데이터 형식를 의미해요.
- 브라우저는
<script>self.__next_f.push(...)</script>형식으로 이를 받아 처리해줍니다. - 이 Payload에는 아래와 같은 내용이 포함이 돼요.
- 서버 컴포넌트의 결과
- 클라이언트 컴포넌트 위치 정보
- 전달된 props 정보 등이 포함됨
실제 네트워크 동작
- 초기 진입 시
document요청에 HTML + RSC Payload + JS 번들이 포함돼요. - 이후 탐색 시엔
.rsc또는/_next/data/...등을 통해 RSC Payload만 전송해요. - DevTools > Network >
document> Response 에서<script>self.__next_f.push(...)</script>블록을 확인할 수 있어요.
🧠 결론
Next.js RSC는 "서버에서 HTML을 만든다"는 개념이 아니라, "React 트리의 결과를 직렬화하여 스트리밍" 한다는 것이 핵심이에요.