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用語: 再帰処理（Recursion）とは｜関数が自分自身を呼び出す仕組み
再帰処理の概念・ベースケースの重要性・階乗計算やツリー探索での活用例を解説。
IT用語: DRY原則とは｜「繰り返しを避けよ」というプログラミングの鉄則
Don't Repeat Yourself（DRY）原則の意味と、WET（重複だらけ）なコードが引き起こす問題と対処法を解説。
Prettier（コードフォーマッター）
コードを自動的に整形するオピニオネイテッドなフォーマッター。JavaScript・TypeScript・CSS・HTML・JSON・Markdownに対応し、チームのコードスタイル論争を終わらせる。
ESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
モノレポ（Monorepo）
複数のプロジェクトやパッケージを1つのGitリポジトリで管理する手法。コードの共有・一貫したCI/CD・依存関係の統一が容易になる。Turborepo・Nx・Yarnワークスペースで実装される。
SPA（シングルページアプリケーション）
ページ遷移時にブラウザをリロードせず、JavaScriptで動的にコンテンツを更新するWebアプリのアーキテクチャ。React・Vue・Angularで実装されることが多い。