Next.js · Streaming

RSC Streaming Waterfall

서버가 보낸 것(좌: 청크 워터폴)과 사용자가 본 것(우: 브라우저 화면)을 같은 시각축에 나란히 둡니다. 각 청크의 도착 시각이 숫자로 남고, 도착하는 순간 해당 칸의 스켈레톤이 실제 콘텐츠로 교체됩니다.

0ms / 2,000ms

셸 flushlayoutpageSuspense 청크ProductInfoReviewsRecs

첫 페인트 300ms·전체 완료1,700ms막대 색 = 오른쪽 화면 칸 색 · 청크가 도착하면 같은 색 칸이 채워집니다 · 좌측 타임라인 드래그로 이동

layoutapp/layout.tsx · 160ms 도착
루트 레이아웃 RSC 페이로드. 데이터가 필요 없어 가장 먼저 만들어지고 TTFB를 결정한다.
pageapp/products/[id]/page.tsx · 300ms 도착
페이지 셸과 Suspense fallback(스켈레톤)까지 함께 flush 된다. 여기까지가 300ms 첫 페인트다.
ProductInfo<Suspense> ProductInfo · 680ms 도착
await getProduct() — 캐시 히트라 680ms에 가장 먼저 도착해 상품 정보 칸의 스켈레톤을 교체한다.
Reviews<Suspense> Reviews · 1,180ms 도착
await getReviews() — DB 조회라 1,180ms가 걸리지만, 이 지연이 셸이나 다른 칸을 막지 않는다.
Recs<Suspense> Recommendations · 1,700ms 도착
외부 API라 1,700ms로 가장 늦다. 그 사이에도 나머지 화면은 이미 보이고 조작할 수 있다.

같은 그룹의 다른 시각화