SSRとCSRの違いは？初回表示・SEO・ハイドレーションを比較

ひよこ

SSRとCSRは何が違うの？

ペンギン先生

SSRはサーバー側でHTMLを生成する方式、CSRはブラウザ側のJavaScriptで画面を組み立てる方式だよ。一つのサイトや画面で組み合わせることもある。ファイルがどこに置いてあるかだけでは判断できないね。

ひよこ

SSRならすぐ操作できる？

ペンギン先生

HTMLが先に見えても、操作用JavaScriptの読み込みやハイドレーションを待つ場合があるよ。ハイドレーションは、サーバーが作ったHTMLにクライアント側の処理を結び付けること。見える時点と、ボタンが反応する時点を分けて測ろう。

ひよこ

初回表示はSSRのほうが速い？

ペンギン先生

主要な内容をHTMLで渡せる利点はあるけれど、サーバー処理やデータ取得が遅ければ応答も遅くなるよ。CSRではJavaScriptの取得と実行、追加のAPI通信が初回表示に影響する。どちらもデータ量とキャッシュ次第なんだ。

ひよこ

CSRはSPAと同じ？

ペンギン先生

違うよ。SPAはページ遷移の構成、CSRは描画をする場所に関する言葉だね。SSRで初回HTMLを作った後に、クライアント側の遷移を使うこともできる。CSRでもAPIや追加JSの通信が不要になるわけではないよ。

ひよこ

CSRだとGoogleに登録されない？

ペンギン先生

GoogleはJavaScriptを実行してページを処理できるので、CSRだけで登録されないとは言えない。ただし取得・実行が失敗すれば内容を把握できないことがあるし、JavaScriptを実行しないボットもいる。主要な内容をHTMLで渡す利点はあるよ。

ひよこ

SSGはどう違うの？

ペンギン先生

SSGはビルド時にHTMLを作っておく方式だよ。記事などに向くことがあるけれど、更新をどう反映するかを決める必要がある。Next.jsのISRのようにキャッシュを使い再生成する方式もあり、時間が来た瞬間に全ページを更新するという意味ではないんだ。

ひよこ

RSCもSSRの別名？

ペンギン先生

React Server Componentsは別の仕組みだよ。サーバー側の環境でコンポーネントを処理し、そのコンポーネントのコード自体をブラウザへ送らない。SSRと組み合わせられるし、操作が必要な部分にはClient Componentsを使う。Client Componentsも初回HTMLへ含まれることがあるよ。

ひよこ

どう選ぶのがよい？

ペンギン先生

公開記事ならSSG、リクエストごとに変わる内容ならSSR、操作中心の部分ならCSRなどを出発点に、要件で判断しよう。ログイン後の画面でも初回速度は重要。名前だけで決めず、主要な内容が見える時間と操作の応答を実際に確認するんだ。

描画場所と、生成する時点を分ける

SSRでも結果をキャッシュできます。CSRでもデータ取得のAPIに負荷がかかるため、サーバーが不要になるとは限りません。

遅いときの切り分け

1. 応答が遅い：サーバー処理、データ取得、キャッシュを確認する。
2. 応答は来たが内容が出ない：JS・CSS・画像・APIの取得と実行を確認する。
3. 見えるが操作が遅い：ハイドレーションや長いJavaScript処理を確認する。

検索への反映は、URL検査で取得・レンダリングされた内容を確認します。「ブラウザでは表示できる」だけではクローラーでも同じとは限りません。SSRを採用すること自体が順位向上の保証になるわけでもありません。

参考資料

確認日：2026年9月27日。製品の仕様・料金・対応環境は導入時にも確認してください。

• web.dev: Rendering on the Web：SSR・CSR・ハイドレーションと性能の条件。
• Google: JavaScript SEO basics：JavaScriptの処理とサーバー側描画の利点。
• React: Server Components：RSCとSSR、Client Componentsの役割。
• Next.js: ISR：時間・オンデマンドの再検証。