Streaming SSR (Suspense per Chunk)

#46RenderingHard

Streaming SSR (Suspense per Chunk)

Streaming SSR

실제 renderToPipeableStream은 셸을 먼저 흘리고 Suspense 경계가 resolve되는 대로 추가 청크를 흘립니다. 이 문제에서는 같은 멘탈 모델을 클라이언트에서 모사합니다.

구현할 것

type Item = { id: string; label: string };

type StreamingListProps = {
  // 청크 단위로 분할된 아이템 배열들. 각 청크는 promise.
  chunks: Promise<Item[]>[];
};

export function StreamingList(props: StreamingListProps): JSX.Element;

동작

각 chunks[i] promise를 자체 <Suspense fallback> 경계로 감싸 순차적으로 렌더합니다.
chunk 0이 먼저 resolve되면 chunk 0이 보이고, chunk 1은 여전히 fallback 상태.
chunk 1이 resolve되면 chunk 1도 보임. 이전 청크들은 그대로 유지.
각 아이템은 <li>{label}</li>로 렌더.

학습 포인트

Streaming SSR의 핵심: Suspense 경계마다 독립적으로 렌더
빠른 콘텐츠는 먼저, 느린 콘텐츠는 나중에 — 셸 차단 없음
findByText로 progressive 렌더링을 테스트

import { Suspense, use } from 'react';

export type Item = { id: string; label: string };

export type StreamingListProps = {
  chunks: Promise<Item[]>[];
};

// 각 promise를 한 번만 use()하기 위해 식별성 보존이 중요합니다 — chunks 배열을 직접 use하세요.

function ChunkBlock({ promise, index }: { promise: Promise<Item[]>; index: number }) {
  // TODO: use(promise)로 items를 얻으세요
  // TODO: items.map으로 <li key={item.id}>{item.label}</li> 렌더
  // TODO: <ul data-testid={`chunk-${index}`}>로 감싸세요
  return null;
}

export function StreamingList({ chunks }: StreamingListProps) {
  // TODO: chunks.map으로 각 promise를 <Suspense fallback={<p>Loading chunk {i}</p>}>로 감싸세요
  // TODO: 각 Suspense 안에 <ChunkBlock promise={p} index={i} />
  // TODO: 전체를 <div>로 감싸세요
  return <div>{/* TODO */}</div>;
}

Open Sandbox

Sandpack 로드 중…

import { Suspense, use } from 'react';

export type Item = { id: string; label: string };

export type StreamingListProps = {
  chunks: Promise<Item[]>[];
};

// 각 promise를 한 번만 use()하기 위해 식별성 보존이 중요합니다 — chunks 배열을 직접 use하세요.

function ChunkBlock({ promise, index }: { promise: Promise<Item[]>; index: number }) {
  // TODO: use(promise)로 items를 얻으세요
  // TODO: items.map으로 <li key={item.id}>{item.label}</li> 렌더
  // TODO: <ul data-testid={`chunk-${index}`}>로 감싸세요
  return null;
}

export function StreamingList({ chunks }: StreamingListProps) {
  // TODO: chunks.map으로 각 promise를 <Suspense fallback={<p>Loading chunk {i}</p>}>로 감싸세요
  // TODO: 각 Suspense 안에 <ChunkBlock promise={p} index={i} />
  // TODO: 전체를 <div>로 감싸세요
  return <div>{/* TODO */}</div>;
}

Open Sandbox