스트리밍 SSR(Streaming Server-Side Rendering)은 서버가 페이지 전체를 다 만들 때까지 기다리지 않고, 준비된 부분의 HTML(HyperText Markup Language)부터 먼저 보내고 느린 부분은 준비되는 대로 같은 응답에 이어서 흘려보내는 렌더링 방식이다. Suspense 경계가 나눔의 단위다.
통짜 SSR의 폭포수
사용자 100ms → 상품 200ms → 추천 3000ms → HTML 생성 → 응답 (3.3초 뒤 첫 바이트)옛 SSR은 데이터를 다 받아야 HTML을 만들고, JS(JavaScript)를 다 받아야 하이드레이션을 시작하고, 하이드레이션은 한 번 시작하면 멈출 수 없었다. 가장 느린 조각 하나가 전체를 붙잡았다.
스트리밍
<>
<Header />
<Suspense fallback={<RecommendSkeleton />}>
<Recommendations /> {/* 3초 걸리는 서버 컴포넌트 */}
</Suspense>
<Footer />
</>- 헤더·푸터와 fallback이 든 HTML을 즉시 보낸다. 사용자는 바로 페이지를 본다
- 추천 데이터가 준비되면 그 영역의 HTML과 교체용 스크립트를 같은 연결로 이어 보낸다
- 경계마다 JS가 오는 대로 따로 하이드레이션된다
- Next.js App Router는 기본으로 스트리밍한다.
loading.tsx는 페이지를 Suspense로 감싸는 단축 문법이다 - 흐르는 것은 HTML만이 아니라 RSC 페이로드도 포함한다. 서버가 넘긴 Promise를 클라이언트에서 use()로 읽는 것도 이 위에서 동작한다
- 첫 바이트가 빨라지는 대신, 이미 보낸 HTTP(HyperText Transfer Protocol) 상태 코드와 헤더는 나중에 바꿀 수 없다
- 정적 셸과 스트리밍을 합친 것이 부분 사전 렌더링(PPR)이다. 렌더링 방식 비교는 CSR·SSR·SSG·ISR, 사용자 체감 지표는 Core Web Vitals