패스잇
프론트엔드 개발 · 심화

RSC Payload(React Server Component Payload) 내부 구조는 대략적으로 어떤 형태로 구성되어 있나요?

힌트 · JSON과 유사한 줄바꿈 분리(Line-delimited) 스트림 형식으로, 컴포넌트 트리 구조, Client Component에 대한 모듈 참조(Reference), 그리고 전달되는 직렬화된 Props가 포함되어 있습니다.

렌더링 결과데이터 직렬화컴포넌트 ID플레이스홀더참조 관계

모범답안

RSC Payload는 서버 컴포넌트 렌더링 결과를 담은 일종의 데이터 스트림입니다. JSON과 비슷하지만, 줄바꿈으로 구분된 형태를 띠고 있어요.

내부적으로는 렌더링된 컴포넌트 트리 구조를 표현하고, 클라이언트 컴포넌트에 대한 참조 정보, 그리고 직렬화된 Props를 포함합니다. 예를 들어, 특정 컴포넌트의 ID와 그 위치에 삽입될 클라이언트 컴포넌트의 모듈 참조, 그리고 해당 컴포넌트에 전달될 Props가 함께 담겨있는 것이죠.

이 Payload는 클라이언트에서 파싱되어 실제 UI를 구성하는 데 사용됩니다. 서버에서 렌더링된 초기 상태를 빠르게 보여주고, 필요한 부분만 클라이언트에서 업데이트하는 방식으로 동작하게 됩니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 Next.js 면접 질문

← Next.js 면접 질문 전체 보기