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件を見るIT用語: DRY原則とは｜「繰り返しを避けよ」というプログラミングの鉄則
Don't Repeat Yourself（DRY）原則の意味と、WET（重複だらけ）なコードが引き起こす問題と対処法を解説。
IT用語: デザインパターンとは｜GoFの23パターンと代表例
ソフトウェア設計でよく直面する問題への定番解決策「デザインパターン」の概念とシングルトン・ファクトリー等の代表パターンを解説。
ESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
IT用語: リファクタリングとは｜外から見た動作を変えずに内部を改善する
コードの外部動作を保ちながら内部構造を整理するリファクタリングの目的・手法・タイミングを解説。
IT用語: クロージャ（Closure）とは｜関数が変数を「覚える」仕組み
関数が定義された時点のスコープの変数を参照し続けるクロージャの仕組みとカウンターなどの実用例を解説。
Web Components
ブラウザネイティブの技術でカプセル化された再利用可能なUIコンポーネントを作成する仕様。Custom Elements・Shadow DOM・HTML Templatesの3つの技術で構成され、フレームワーク非依存で動作する。