SSR（サーバーサイドレンダリング）とは？仕組みと使い分け

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

SSRとは、利用者がページを開いたときに、表示する内容をサーバー側で完成したHTMLとして組み立て、それをブラウザに送る方式です。Server Side Renderingの略です。

平易に言えば、「料理を厨房で盛り付けてから出す」やり方です。これに対して、材料（データとプログラム）だけを渡して客席（ブラウザ）で組み立てる方式をCSR（クライアントサイドレンダリング）と呼びます。SSRでは届いた時点で中身が完成しているため、最初の表示が速く、検索エンジンも内容を読み取りやすくなります。

もともとPHPなどで作られた従来のWebサイトは、サーバーでHTMLを作るのが当たり前でした。現在SSRという言葉が使われる場合は、ReactなどでSPAを作る技術を使いつつ、最初の表示だけはサーバーで組み立てる仕組みを指すことが多くなっています。

表示方式の違いとポイント

Webページを表示する主な方式を比較します。

方式	HTMLを作るタイミング	得意なこと	注意点
CSR	ブラウザで表示時に作る	操作の多い画面、ログイン後の管理画面	初回表示が遅くなりやすい
SSR	アクセスのたびにサーバーで作る	内容が頻繁に変わり、検索にも載せたいページ	サーバーの負荷と運用の手間
SSG（静的生成）	事前にまとめて作っておく	記事やサービス紹介など更新の少ないページ	更新のたびに再生成が必要
ISR など	事前生成した内容を一定間隔で更新	商品一覧など、ほどほどに更新されるページ	対応フレームワークや環境が限られる

SSRの主な利点は次のとおりです。

初回表示が速く、利用者が待たされにくい
検索エンジンやSNSのリンクプレビューに内容が正しく伝わる
端末の性能が低くても表示しやすい

一方で、アクセスのたびにサーバーで処理するため、アクセスが集中するとサーバーの負荷が上がり、構成や費用の検討が必要になります。Next.jsやNuxtのようなフレームワークでは、ページごとにSSR、SSG、CSRを選べるため、用途に合わせた使い分けがしやすくなっています。

実務での使い方・具体例

ある不動産会社が、物件検索サイトと、社内の物件登録画面を作るとします。ページごとに方式を選ぶと、次のようになります。

会社紹介や店舗案内など更新の少ないページは、SSGで事前に作って高速に配信する
物件の詳細ページは、検索エンジンからの流入が重要で、掲載状況も変わるためSSRにする
物件の検索結果は、条件に応じて表示が変わるため、SSRで初期表示し、絞り込みはブラウザ側で処理する
社内の物件登録画面はログインが前提で検索対象外なので、CSRで操作性を優先する

このように、SSRは「どのページにも使うもの」ではなく、検索流入と表示速度が重要で、内容が変わるページに選択的に使うのが効果的です。

発注側としては、どのページが集客の入り口になるのか、どのページはログイン後にしか使わないのかを開発会社に伝えるだけでも、適切な方式の提案を受けやすくなります。また、SSRを採用する場合は、サーバーの構成や運用費、アクセス集中時の対策についても見積もりの段階で確認しておくとよいでしょう。

よくある誤解と注意点

SSRにすれば検索順位が上がるという誤解。 SSRは検索エンジンに内容を正しく伝えるための前提条件を整えるものであり、順位そのものは内容の質や構造、ページ速度など多くの要素で決まります。

すべてのページをSSRにする。 ログイン後の画面までSSRにすると、サーバーの負荷と開発の複雑さが増すだけで利点が少ないことがあります。

サーバー側とブラウザ側の違いを考慮しない。 SSRでは同じプログラムがサーバーとブラウザの両方で動くため、片方でしか使えない機能を使うと表示が崩れることがあります。経験のある開発者が設計に関わることが重要です。

Otsumuに相談できること

Otsumuは、集客の入り口になるページと業務で使う画面を切り分け、表示方式やサーバー構成を目的から逆算して設計しています。表示速度や検索での見え方に課題がある既存サイトの改善についてもご相談いただけます。

詳しくはWebアプリ開発のページをご覧ください。構成の妥当性を確認したい場合は30分の無料相談をご利用ください。

執筆：Otsumu株式会社／編集日 2026.10.01

SSR（サーバーサイドレンダリング）とは？仕組みと使い分け