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件を見るヘッドレスCMS
表示用フロントエンド（ヘッド）を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
Prettier（コードフォーマッター）
コードを自動的に整形するオピニオネイテッドなフォーマッター。JavaScript・TypeScript・CSS・HTML・JSON・Markdownに対応し、チームのコードスタイル論争を終わらせる。
WebAssembly（Wasm）
ブラウザ上でネイティブに近い速度で実行できるバイナリ命令形式。C・C++・Rustなどのコードをブラウザで動かすことができ、ゲーム・動画編集・CADなど計算負荷の高いWebアプリに使われる。
Go / Golang (ゴー言語)
Google社が開発した、処理速度が超絶爆速で、大量のアクセスに強い現代的なプログラミング言語。
Rust (ラスト)
「処理の速さ」と「メモリの安全性（バグの出にくさ）」を両立させた、世界で最もプログラマーに愛されている次世代言語。
Web Components
ブラウザネイティブの技術でカプセル化された再利用可能なUIコンポーネントを作成する仕様。Custom Elements・Shadow DOM・HTML Templatesの3つの技術で構成され、フレームワーク非依存で動作する。