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

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

サーバーサイドレンダリング（SSR） は、ウェブページのコンテンツをサーバー側で生成し、その生成された HTML をクライアント（ブラウザ）に送信する手法です。具体的には、ユーザーがページにアクセスすると、サーバーはページをレンダリングして完全な HTML を生成し、それをブラウザに返します。ブラウザはその HTML を表示することで、ページが即座に表示されます。

SSR の動作の流れ

ユーザーがページにアクセス: ユーザーがウェブページにアクセスすると、サーバーがリクエストを受け取ります。
サーバーでコンテンツをレンダリング: サーバーは、ページのコンテンツをバックエンドで生成（レンダリング）します。例えば、必要なデータを取得し、テンプレートエンジンを使って HTML を生成します。
生成された HTML をクライアントに送信: サーバーが生成した HTML をクライアント（ブラウザ）に送信します。
ブラウザがページを表示: クライアント（ブラウザ）は、受け取った HTML を表示し、ページが即座にユーザーに表示されます。

特徴

サーバーサイドで HTML を生成: サーバー側で HTML が事前に生成されるため、クライアントはすぐに表示することができます。
即時に表示される: サーバーから完全な HTML を受け取るため、初回ロード時にすぐにページが表示されるという利点があります。これにより、SEO（検索エンジン最適化）やユーザー体験（UX）が向上します。
ページのレンダリングがサーバーで行われる: サーバーはコンテンツ生成を担当し、クライアント（ブラウザ）はその HTML を表示するだけです。

利点

SEO に優れる: SSR では、サーバーが HTML を生成して返すため、検索エンジンがページの内容を正しくインデックスできます。クライアントサイドで動的にコンテンツを生成する場合に比べて、SEO に有利です。
初回表示が速い: サーバーが完全な HTML を返すので、ユーザーがアクセスするとすぐにコンテンツが表示されます。初回のレンダリングにおいて、ユーザーはページの内容を早く確認できるため、UX が向上します。
JavaScript が無効でも動作する: JavaScript を無効にしているユーザーにも HTML が表示されるため、JavaScript の依存が減ります。

欠点

サーバーの負荷が高い: サーバーが全てのリクエストに対して HTML を生成しなければならないため、サーバーの負荷が高くなります。特にトラフィックが多い場合、サーバーリソースに対する要求が増加し、パフォーマンスが低下する可能性があります。
動的なインタラクションが複雑: クライアントサイドで動的にコンテンツを更新する（例えば、ユーザーが操作するたびに内容を変更する）ことが難しくなります。そのため、インタラクションが多いページにはクライアントサイドレンダリング（CSR）との組み合わせが必要になることがあります。
ページの再レンダリング: ユーザーがページを遷移するたびにサーバーから新しい HTML をリクエストする必要があり、ページ遷移の速度が遅くなることがあります。これを解決するために、クライアントサイドでの状態管理やルーティングが必要となる場合があります。

使用する例

Next.js: React フレームワークの 1 つで、SSR を簡単に実装できる機能を提供します。Next.js では、ページごとに SSR を利用したり、静的生成（SSG）を選択したりできます。
Nuxt.js: Vue.js をベースにしたフレームワークで、SSR をサポートしており、サーバーサイドでのレンダリングを簡単に行うことができます。

SSR と CSR の違い

SSR（サーバーサイドレンダリング）: コンテンツはサーバー側で生成され、ブラウザには完全な HTML が送られます。これにより、初回の表示が速く、SEO に有利です。
CSR（クライアントサイドレンダリング）: サーバーは HTML と JavaScript を送信し、ブラウザがその後コンテンツを動的に生成します。インタラクティブなウェブアプリケーションに適していますが、初回ロードが遅く、SEO の問題がある場合があります。

ハイブリッドアプローチ

現代のフレームワークでは、SSR と CSR のハイブリッドアプローチがよく使われています。たとえば、初回ページロード時に SSR を使用して即座にコンテンツを表示し、その後は JavaScript を使ってクライアントサイドでページ遷移や更新を行う（これを「クライアントサイドハイドレーション」と呼びます）方法です。この方法は、SEO とパフォーマンスを両立させるために非常に効果的です。

サーバーサイドレンダリング（SSR）のコンテキストにおいて、リアクティビティ（状態管理やリアルタイムでのデータ更新機能）がサーバー側では機能しない。リアクティビティは、主にクライアントサイド（ブラウザ）で動作する概念であり、サーバーサイドでは通常そのまま機能しません。そのため、クライアントサイドで使用される特定のツールや技術（例：React の Hooks、Vue の Refs、Svelte の Observables、または状態管理ライブラリなど）は、SSR のようなサーバーサイドのレンダリング環境では動作しないまたは消えてしまう。