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

SSR（サーバーサイドレンダリング）とは、Webページの表示内容（HTML）を、利用者のブラウザではなくサーバー側で組み立ててから送り届ける方式のことです。英語のServer-Side Rendering（サーバー側での描画）の頭文字をとった言葉です。

現実世界でいえば、できあがった料理を出す店のようなものです。お客さん（ブラウザ）が席に着くと、すでに調理済みの料理（完成したページ）がすぐ運ばれてきます。材料だけ渡されて自分で調理する必要がなく、届いた瞬間に内容を見られるのが特徴です。

SSRの仕組み

ブラウザがページをリクエストすると、サーバー側でデータを取得し、必要なHTMLを完成した形まで組み立てて返します。ブラウザは受け取ったHTMLをそのまま表示できるため、最初のページが早く見えるのが利点です。表示後は、必要に応じてJavaScriptが読み込まれ、ボタン操作などの動きが加わります。

CSR（クライアントサイドレンダリング）との違い

SSRと対になる考え方がCSRです。ページをどこで組み立てるかが大きく異なります。

SSRのメリット

サーバー側で組み立てることには、いくつかの利点があります。

• 初回表示が速い
  完成したHTMLが届くため、利用者はページの内容をすぐに目にできます。
• SEOに強い
  検索エンジンのロボットがページ内容をそのまま読み取れるため、検索結果に反映されやすくなります。
• 非力な端末でも安定
  組み立て作業をサーバーが担うため、性能の低いスマホなどでも表示が安定します。

SSRのデメリット

一方で、アクセスのたびにサーバーがHTMLを組み立てるため、サーバーの負荷が高くなりやすいという面があります。アクセスが集中すると応答が遅くなることもあり、キャッシュや負荷分散などの工夫が必要になります。ページ切り替えのたびにサーバーとやり取りするため、CSRに比べて操作の軽快さで劣る場合もあります。

SSRが使われる場面

SSRは、検索からの流入が重要で、初回表示の速さが求められるサイトに向いています。ニュースサイトやブログ、商品ページを持つECサイトなどが代表例です。近年はReactやVueといった技術に、Next.jsやNuxtといったフレームワークを組み合わせ、SSRとCSRの良いところを使い分ける作り方が主流になっています。

あわせて知っておきたい用語

• CSR（クライアントサイドレンダリング）：
  ブラウザ側で画面を組み立てる方式。SSRと対になる考え方です。
• SEO：
  検索結果で上位に表示されやすくする工夫。SSRはSEOに有利とされます。
• JavaScript：
  ブラウザ上で動きをつけるプログラミング言語。表示後の操作を担当します。
• Next.js：
  ReactでSSRなどを手軽に実現できる代表的なフレームワークです。
• Webサーバー：
  ブラウザのリクエストに応じてページを返す仕組み。SSRはここでHTMLを組み立てます。