스트리밍 SSR은 서버가 전체 페이지 렌더링을 기다리는 대신 준비되는 대로 HTML을 청크 단위로 브라우저에 보내게 해 줍니다. 느린 부분이 빠른 부분을 막지 않으므로 사용자는 콘텐츠를 점진적으로 봅니다. React <Suspense>가 스트리밍 경계를 정의합니다.
스트리밍이 없으면 한 섹션이 느린 데이터베이스 쿼리를 필요로 할 때 가 HTML도 보내지기 전에 그것을 기다립니다. 사용자는 빈 화면을 응시하죠. 스트리밍은 셸과 빠른 콘텐츠를 즉시 보내고, 느린 부분은 완료되는 대로 스트리밍합니다.
import { Suspense } from "react";
export default function Page() {
return (
<>
<Header /> {/* 즉시 전송됨 */}
<Suspense fallback={<Skeleton />}> {/* 독립적으로 스트리밍됨 */}
<SlowProductList /> {/* async Server Component */}
</Suspense>
<Footer /> {/* 즉시 전송됨 */}
</>
);
}
async function SlowProductList() {
const products = await getProducts(); // 2초 소요 — 나머지를 막지 않음
return <List products={products} />;
}
헤더, 푸터, 스켈레톤이 즉시 도착하고, getProducts()가 해결되면 React가 상품 목록을 스트리밍하여 스켈레톤을 교체합니다. 모두 하나의 연속된 응답 안에서 일어납니다.
// app/dashboard/loading.tsx → Next가 전체 페이지를 이 fallback과 함께 <Suspense>로 감쌈
export default function Loading() { return <Spinner />; }
loading.tsx 파일은 라우트를 Suspense로 감싸는 문법적 설탕입니다. 세그먼트 전체를 스트리밍하는 가장 간단한 방법입니다.
TTFB (Time To First Byte) ↓ — 서버가 셸을 즉시 보냄
FCP (First Contentful Paint) ↓ — 보이는 콘텐츠가 더 빨리 나타남
일부 데이터가 느려도 사용자는 페이지를 빠르게 인식함
또한 선택적 hydration도 얻습니다. React는 모든 것을 기다리지 않고 상호작용형 부분이 스트리밍되어 들어오는 대로 hydration할 수 있습니다.
스트리밍 SSR은 전통적인 SSR에 내재된 "하나의 느린 쿼리가 페이지 전체를 막는" 문제를 제거합니다.
느리고 데이터에 의존하는 섹션을 <Suspense>로 감싸거나 loading.tsx를 사용하면 빠른 셸을 즉시 보내고 나머지를 스트리밍하여 TTFB/FCP와 체감 성능을 개선합니다.
이는 App Router의 Server Components + React 18 아키텍처를 정의하는 능력입니다.