Streaming SSR with Suspense
두 레인이 같은 시간축을 공유합니다. 일괄 SSR은 2,150ms까지 이어지지만, 스트리밍 레인은 180ms에 완료 지점을 표시하고 나머지 구간은 스트림을 연 채 비워 둡니다.
🔒 일괄 SSR — 전부 기다린다
2,150ms서버가 셸과 추천 API를 한 덩어리로 처리한다. 가장 느린 fetch가 끝날 때까지 첫 바이트조차 나가지 못해, 사용자는 2초 내내 빈 화면을 본다.
- ①전체 대기0ms – 2,000ms
셸 렌더와 추천상품 API(2초)가 하나의 응답에 묶여 있다. 빠르게 준비된 헤더·레이아웃도 함께 붙잡혀 전송되지 못한다.
- ②HTML 전송2,000ms – 2,090ms
2초가 지난 뒤에야 완성된 HTML 문서 전체가 한 번에 전송된다.
- ③페인트2,090ms – 2,150ms
브라우저가 페이지 전체를 한 번에 그린다. 이 순간이 곧 첫 화면이다.
- 셸 표시 · 2,150ms 대기
- 추천 영역 · 2,150ms 대기
⚡ Streaming SSR — 준비된 것부터
180ms정적 셸을 먼저 flush 해 150ms 만에 스켈레톤을 띄우고, HTTP 스트림을 열어 둔 채 느린 청크가 도착하면 그 자리만 교체한다. 느린 API는 여전히 2초지만 첫 화면은 기다리지 않는다.
- ①셸 렌더0ms – 110ms
헤더·네비게이션 등 데이터가 필요 없는 정적 셸을 먼저 만든다.
- ②셸 flush110ms – 150ms
완성을 기다리지 않고 셸과 Suspense fallback을 먼저 내보낸다.
- ③스켈레톤150ms – 180ms
브라우저가 셸과 로딩 스켈레톤을 180ms에 페인트한다. 여기서 첫 화면이 완성된다.
- ④스트림 유지180ms – 2,080ms
연결을 끊지 않고 열어 둔다. 메인 스레드는 비어 있어 사용자 조작에 계속 반응한다.
- ⑤청크 도착2,080ms – 2,220ms
느린 API가 끝나면 그 조각만 인라인 스크립트 청크로 스트리밍된다.
- ⑥UI 교체2,220ms – 2,300ms
스켈레톤 자리에 실제 추천 카드가 끼워진다. 페이지 전체를 다시 그리지 않는다.
- 셸 표시 · 180ms 대기
- 추천 영역 · 2,300ms 대기
같은 그룹의 다른 시각화
Selective Hydration
React · Selective Hydration일괄 수화와 선택적 수화에서 클릭이 처리되는 시점을 비교합니다.
Partial Prerendering (PPR)
Next.js · Rendering전체 동적 렌더링과 정적 셸·동적 영역의 스트리밍을 비교합니다.
Concurrent Transitions
React · Transitions동기 렌더링과 작업을 나누는 렌더링의 입력 지연을 비교합니다.
Optimistic UI (Server Actions)
React · Optimistic UI서버 응답을 기다리는 UI와 먼저 반영하는 낙관적 UI를 비교합니다.
ISR Stale-While-Revalidate
Next.js · Caching재생성을 기다리는 응답과 기존 값을 먼저 반환하는 응답을 비교합니다.