【えすえすあーる】

SSR(サーバーサイドレンダリング) とは?

💡 注文を受けてからシェフが作る「できたて料理」のようなWeb表示
📌 このページのポイント
SSR:サーバーサイドレンダリング ブラウザ ユーザー リクエスト サーバー テンプレート + データ HTML 生成! 完成HTML ブラウザ 即表示! 処理の流れ(詳細) 1. リクエスト /about を要求 2. データ取得 DB/APIに問合せ 3. HTML生成 テンプレに埋込 4. HTML返却 完成HTMLを送信 5. 表示 すぐ見える メリット:SEOに強い・初期表示が速い デメリット:サーバー負荷が高い リクエストのたびにサーバーがHTMLを動的に生成して返す方式
リクエストごとにサーバーがHTMLを動的に生成して返す仕組み
ひよこ ひよこ

SSRって何がうれしいの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

SPAとSSRはどっちがいいの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

SSRだとサーバーが大変にならない?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

SSRの実装って難しいの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

ストリーミングSSRって何?

ペンギン先生 ペンギン先生

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

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
SSRって出てきたら「サーバーHTMLを作ってから返す仕組み」と思えばだいたいOK!
📖 おまけ:英語の意味
「Server-Side Rendering」 = サーバー側での描画
💬 ブラウザ(クライアント)ではなくサーバーがHTMLを組み立てることからこの名前がついた
← 用語集にもどる