ストリーミングSSR は、ページ全体のレンダリングを待つ代わりに、サーバーが準備ができた時点でHTML をチャンク単位でブラウザに送信できます。遅いパーツが高速パーツをブロックせず — ユーザーはコンテンツを段階的に見ることができます。React の <Suspense> はストリーミングの境界を定義します。
ストリーミングなしでは、1つのセクションが遅いデータベースクエリを必要とする場合、が HTMLが送信される前に待機します — ユーザーは空白の画面を見つめます。ストリーミングはシェルと高速コンテンツを即座に送信し、その後、遅いパーツが完了するにつれてストリーミングします。
import { Suspense } from "react";
export default function Page() {
return (
<>
<Header /> {/* sent immediately */}
<Suspense fallback={<Skeleton />}> {/* streams independently */}
<SlowProductList /> {/* an async Server Component */}
</Suspense>
<Footer /> {/* sent immediately */}
</>
);
}
async function SlowProductList() {
const products = await getProducts(); // takes 2s — doesn't block the rest
return <List products={products} />;
}
ヘッダー、フッター、スケルトンは即座に到着します。getProducts() が解決されると、React は製品リストをストリーミングし、スケルトンを置き換えます — すべて1つの継続的な応答で。
// app/dashboard/loading.tsx → Next wraps the whole page in <Suspense> with this fallback
export default function Loading() { return <Spinner />; }
loading.tsx ファイルはルートを Suspense でラップするための糖衣構文です — セグメント全体をストリーミングする最も簡単な方法です。
TTFB (Time To First Byte) ↓ — server sends the shell right away
FCP (First Contentful Paint) ↓ — visible content appears sooner
User perceives the page as fast even if some data is slow
また、選択的ハイドレーション も取得します — React はすべてを待つ代わりに、ストリーミング時にインタラクティブパーツをハイドレーションできます。
ストリーミングSSRは、従来のSSRに固有の「1つの遅いクエリがページ全体をブロック」という問題を排除します。
遅い、データに依存するセクションを <Suspense> でラップする (または loading.tsx を使用する) ことで、高速シェルを即座に配信し、残りをストリーミング — TTFB/FCP と知覚的パフォーマンスを改善します。
App Router の Server Components + React 18 アーキテクチャの定義的な機能です。