【すとりーみんぐさーばーさいどれんだりんぐ】

ストリーミングSSR とは？

最終更新: 2026年10月8日

💡 先にページの土台を届けて、続きもできた順に送る

ストリーミングSSRは、サーバーで作るHTMLを準備できた部分から段階的に送る方法です。ReactのSuspenseによる待機表示と後続の内容、表示と操作の違い、配信環境の条件を説明します。

📌 このページのポイント

ReactのSuspenseを使う例。待機表示から後続の内容へ置き換え、操作の準備も別に進めます。

ひよこ

ページが全部完成する前に、送れるの？

ペンギン先生

サーバーがHTMLを準備できた部分から送れるよ。Reactでは、見出しやページの枠組みを先に送り、遅い部分に待機表示を出しておける。全部のHTMLをまとめて返す方法と比べ、読める部分を先に届けられる場合があるんだ。SSRは必ず一括でしか送れない、という意味ではないよ。

ひよこ

遅い内容は、あとで別のページになる？

ペンギン先生

同じページへ後続の内容を送るよ。ReactのSuspenseで囲んだ部分は、最初にfallbackを出し、内容が準備できたら、その部分を置き換えるためのHTMLなどを送る。図はタイトルと待機表示が先に届き、商品の内容があとで届く例だよ。

ひよこ

Suspenseで囲めば、すべての通信に効く？

ペンギン先生

Suspenseに対応したデータの取得などが対象だよ。useEffectやイベント処理の中で通信するだけでは、Suspenseによる待機表示を自動的に使えない。利用するフレームワークの取得方法と、どこに境界を置くかを確認しよう。

ひよこ

表示されたら、ボタンもすぐ押せる？

ペンギン先生

見えることと、反応することは別だよ。サーバーから届いたHTMLへReactの処理を結び付けるハイドレーションなどが必要になる。表示までの時間だけでなく、使いたい操作がいつ可能になるかも確認しよう。

ひよこ

導入すれば、必ず速くなる？

ペンギン先生

ページの土台の生成が遅ければ、先に送る部分も待つよ。ブラウザや配信経路が小さい応答をためる場合もある。Next.jsの案内では実行環境の対応を確認する必要があり、静的エクスポートとは区別されている。待機表示だけを増やすのではなく、実際の通信と表示、操作までを測って判断しよう。

まとめ：ざっくりこれだけ覚えればOK！

「ストリーミング SSR」って出てきたら「できた部分のHTMLから順に送るサーバー描画」と思えばだいたいOK！

📖 おまけ：英語の意味

「Streaming Server-Side Rendering」＝ストリーミング・サーバーサイドレンダリング

💬 動画のストリーミング配信と同じ発想で、全部完成するまで待たずにHTMLを少しずつ流し込む技術だよ。

参考資料