Server-side rendering (サーバーサイドレンダリング) (SSR)

サーバーサイドレンダリング (SSR) とは、サーバー側で HTML コンテンツを生成し、クライアントに送信する手法を指します。 SSR は、 クライアントサイドレンダリング （クライアントが JavaScript を使用して HTML コンテンツを生成する）とは対照的です。両方の手法は相互に排他的ではなく、同じアプリケーション内で併用できます。

静的サイトは、 SSR と見なすことができ（ SSR インフラストラクチャを使用して生成することもできます）、微妙な違いがあります。静的サイトのコンテンツは、リクエスト時ではなくビルド時に生成されます。静的サイトは 1 つのサーバー上ですべてを配信する必要がなく、 CDN から配信できます。

SSR / CSR の区別は、リアルタイム更新やユーザー固有のコンテンツなど、動的なコンテンツを持つサイトでより意味を持ちます。このような場合、サーバーはリクエストごとに HTML コンテンツをオンザフライで生成します。これは、ありうるページすべてを事前に生成することは現実的ではないためです。HTML ファイルにはほぼ完全なページコンテンツが含まれており、 JavaScript アセットはインタラクティブ機能を実現するためのみに使用されます。

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

• アクセシビリティ： JavaScript なしでも（ある程度）利用可能です。例えば、インターネットの速度が遅い場合、ユーザーが JavaScript を無効にしている場合、またはブラウザーが古く JavaScript が実行されない場合などです。ただし、インタラクティブ機能やクライアントサイドのロジックは動作しません。
• クローラーフレンドリー： 検索エンジン、ソーシャルメディアクローラー、その他のボットは、 JavaScript を実行せずにコンテンツを簡単に読み取ることができます。主要な検索エンジンは JavaScript を実行できるため、純粋な CSR サイトはインデックスできますが、ソーシャルメディアクローラーは通常 JavaScript を実行できないことに注意してください。
• パフォーマンス： サーバーは必要なコンテンツを事前に把握でき、必要なデータをすべて一度に取得できます。一方、 CSR では、クライアントは最初のページをレンダリングするときにのみ追加の依存関係を認識することが多く、リクエストのウォーターフォールが発生します。

SSR と CSR はどちらもパフォーマンス面でトレードオフがあり、 SSR と CSR を組み合わせることで両方の手法の利点を活かすことができます。例えば、サーバーは空のプレースホルダーを含むページのスケルトンを生成し、クライアントは必要に応じて追加データを取得してページを更新することができます。