ストリーミングSSR とは？

普通のSSRは全部のHTMLを作り終えてからまとめて送るんだけど、ストリーミングSSRは出来上がった部分から少しずつブラウザに送るんだよ。ページのヘッダー部分が完成したら即座に送って、ブラウザはそこから表示し始めるんだ。

すごくわかるよ。特にデータベースへの問い合わせが遅いページで効果的で、ヘッダーやナビゲーションを先に表示しておいて、重いコンテンツは後から流し込めるんだ。ユーザーは「何か動いてる」と感じられるから離脱率も下がるんだよ。

ReactのSuspenseは「このコンポーネントのデータはまだ取得中」という状態を表現できるんだよ。ストリーミングSSRと合わせると、Suspenseで囲んだ遅い部分だけをプレースホルダー（スケルトン画像など）で先に送って、データが揃ったら差し替えるHTMLを後から流すことができるんだ。

Time To First Byteの略で、ブラウザがリクエストを送ってからサーバーから最初の1バイトが届くまでの時間だよ。ストリーミングSSRは最初のチャンクをすぐ送るからTTFBが短くなって、SEO的にも有利になるんだね。

Next.js App RouterはデフォルトでストリーミングSSRに対応していて、Suspenseを使うだけで自動で有効になるよ。サーバー側のHTTPレスポンスをチャンクで送るのはフレームワークが全部やってくれるから、開発者はSuspenseの境界をどこに置くかを考えるだけでいいんだ。