SSR（サーバーサイドレンダリング） とは？

ブラウザがページを表示する前に、サーバーが完成したHTMLを作って渡してくれる。だから初回表示が速いし、Googleのクローラーも中身を読めるからSEOに強い。SPAだとブラウザ側でJavaScriptを実行してからHTMLを組み立てるので、初回表示が遅くなりやすい。

用途による。管理画面のようにSEO不要でインタラクション重視ならSPA、ブログやECサイトのようにSEOと初回表示速度が大事ならSSR。Next.jsはページごとにSSRとSPAを使い分けられるので、両方の良いとこ取りができる。

リクエストごとにHTMLを生成するのでサーバー負荷は上がる。キャッシュを活用したり、変化しないページはSSG（静的生成）にして負荷を減らす工夫が一般的。Next.jsのISR（Incremental Static Regeneration）のように、一定時間キャッシュして裏で再生成する仕組みもある。

自前で実装するとかなり大変だよ。サーバ側でReactをレンダリングするだけでなく、ハイドレーション（サーバで生成したHTMLにクライアント側のイベントハンドラを紐付ける処理）も考える必要がある。Next.jsやNuxtを使えばこの複雑さを吸収してくれるから、SSRをやるなら素のReactよりフレームワークを使うのが現実的だよ。

React 18で導入された機能で、HTMLを一気に返すのではなく「準備ができた部分から順に送る」方式だよ。ヘッダー部分はすぐ送って、データ取得が必要なコンテンツ部分は後から流し込む。ユーザーは完全なページを待たずに表示が始まるので体感速度が上がる。Next.js 13以降のApp Routerではこれがデフォルトの挙動になっているんだよ。