SSR（サーバーサイドレンダリング）
Webページをサーバー側でHTMLとして生成してからクライアントに送信する手法。SPAのSEO問題を解決し、初期表示を高速化できる。Next.js・Nuxt.jsで実装されることが多い。
SSR（Server-Side Rendering）とは？
SSR（Server-Side Rendering、サーバーサイドレンダリング）は、ユーザーのリクエストに応じてサーバー側でHTMLを動的に生成してから送信する手法です。クライアント（ブラウザ）がHTMLを受け取った時点でコンテンツが表示済みのため、初期表示が速く、SEOに有利です。
CSR・SSR・SSGの比較
| 手法 | HTML生成タイミング | SEO | 初期表示 | データの鮮度 |
|---|---|---|---|---|
| CSR（SPA） | ブラウザ（JS実行後） | 不利 | 遅い | リアルタイム |
| SSR | リクエスト時（サーバー） | 有利 | 速い | リアルタイム |
| SSG | ビルド時（事前生成） | 有利 | 最速 | ビルド時点 |
ハイドレーション（Hydration）
SSRで送られた静的HTMLに、クライアント側でJavaScriptを「注水」してインタラクティブにする処理をハイドレーションといいます。ハイドレーション完了前はボタン等が反応しないため、UXに注意が必要です。
主なSSRフレームワーク
| フレームワーク | ベース |
|---|---|
| Next.js | React |
| Nuxt.js | Vue.js |
| SvelteKit | Svelte |
| Remix | React |
まとめ
SSRはSEOが必要で、かつリアルタイムデータが必要なページに最適です。ブログや静的コンテンツが多い場合はSSGの方が適しています。
関連する用語 (プログラミング)
全33件を見るGraphQL
FacebookがRESTの課題を解決するために開発したAPIクエリ言語。クライアントが必要なデータの形を宣言的に指定して取得でき、オーバーフェッチ・アンダーフェッチを解消する。
JavaScript (JS)
Webブラウザ上で動きのある表現（アニメーション等）を実現するためのプログラミング言語。
IT用語: DRY原則とは｜「繰り返しを避けよ」というプログラミングの鉄則
Don't Repeat Yourself（DRY）原則の意味と、WET（重複だらけ）なコードが引き起こす問題と対処法を解説。
IT用語: 依存性の注入（DI）とは｜テストしやすいコードを書く設計原則
クラスが依存するオブジェクトを外部から渡す「依存性の注入（Dependency Injection）」の概念とテスタビリティへの効果を解説。
ヘッドレスCMS
表示用フロントエンド（ヘッド）を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
JAMstack
JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャ。ビルド時に静的HTMLを生成し、動的機能はAPIで補完することで高速・安全・スケーラブルなWebサイトを実現する。