프론트엔드 개발 · 심화
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 Middleware(`middleware.ts`)에서 특정 경로들만 미들웨어를 거치도록 적용 대상을 필터링하는 설정 객체의 속성 이름은 무엇인가요?
- Middleware 파일 내부에서 조건부로 사용자를 로그인 페이지로 리다이렉트 시키려면 어떤 클래스의 메서드를 반환해야 하나요?
- App Router의 Route Handlers(`app/api/route.ts`)에서 동적 라우팅 파라미터(예: `[id]`)에 접근하려면 함수의 매개변수를 어떻게 정의해야 하나요?
- React 렌더링 파이프라인에서 RSC(React Server Component)가 생성한 Payload를 클라이언트(브라우저)가 받아 기존 DOM과 병합하는 과정(Reconciliation)을 담당하는 React API는 무엇인가요?
- Next.js 14의 Partial Prerendering(PPR)을 사용할 때, 특정 컴포넌트가 동적(Dynamic) 렌더링되도록 트리거하는 가장 보편적인 React API는 무엇인가요?
- Next.js의 Data Cache가 무효화(revalidate)될 때, 즉시 백그라운드에서 새 데이터를 가져오나요, 아니면 다음 요청이 올 때까지 기다렸다가 무효화 처리(On-demand)를 하나요?