SPA（Single Page Application）
1つのHTMLページから成り立っており、URLが変わってもページ全体の再読み込みは発生せず、JavaScriptで画面の一部だけを切り替える仕組み
使用例
- Gmail
- Google Maps
- Notion
- Slack（Web版）
代表的なフレームワーク
- React
- Angular
- Vue.js
メリット
- 一度読み込めば、ページ遷移がスムーズ
- フロントエンドとバックエンドを分離しやすい（API通信だけで済む）
- JavaScriptのフレームワーク（React、Vue、Angular）との相性がよい
デメリット
- 初回読み込みが重い（JavaScriptやデータを一気に読み込むため）
- SEOが苦手（検索エンジンがJavaScriptをうまく解釈できないことがあるため）
※ SEO：Googleなどの検索エンジンで自分のサイトが上位に表示されやすくするための工夫
SSR（Server Side Rendering）
ユーザーがWebページにアクセスしたときに、サーバー側でHTMLを生成してからブラウザに送る仕組み
動き方
- ユーザーがページにアクセスします（例：
https://example.com/products） - サーバーが必要なデータを取得し、HTMLを生成します
- 生成されたHTMLをそのままブラウザに返します
- ユーザーは完成したページをすぐに見ることができます
- その後JavaScriptが読み込まれ、ページが動的になります
使用例
- Amazon
- Netflix
- Next.js公式サイト（動的記事など）
代表的なフレームワーク
- Next.js
- Nuxt.js
メリット
- SPAと比べて初回表示が速い（読み込んだ瞬間にHTMLが完成してる）
- SEOに強い（検索エンジンがHTMLをそのまま読める）
デメリット
- アクセスごとにサーバー処理が発生し、サーバーに負荷がかかる
- 表示が完了するまでにAPI通信の待ち時間がある（動的データを取りに行く必要がある）
- クライアントだけで完結しないので、サーバーが必要
SSG（Static Site Generation）
予め静的なHTMLファイルを生成し、リクエスト時、ユーザーに返す仕組み
動き方
- ビルド時（＝本番公開の前）に、データを使ってHTMLを生成します
- 出来上がったHTMLをサーバーやCDNにアップロードします
- ユーザーがアクセスすると、待ち時間なしでHTMLが返ります
使用例
- GitHub Docs
- Next.js公式サイト（トップページや静的ページ）
代表的なフレームワーク
- Next.js
- Nuxt.js
メリット
- ページの表示が速い
- サーバーへの負担軽減
- SEOに強い（HTMLがすでに存在してるから検索エンジンに優しい）
- セキュリティリスクが低い（動的処理がないため）
デメリット
- 更新頻度が高いページには不向き（更新のたびにビルドが必要なため）
- コンテンツが多いとビルド時間が長くなる
比較表
| 特徴 | SPA | SSR | SSG |
|---|---|---|---|
| 表示速度 | 初回遅い、以降は高速 | 毎回サーバー処理有 | 最速 |
| SEO対策 | 弱い（要工夫） | 強い | 強い |
| 更新頻度 | 動的データ向き | 動的データ向き | 静的データ向き |
| ユースケース | Webアプリ | ニュースサイト、ブログ | ドキュメント、会社サイト |
向いているケース
SPA
- リアルタイムなデータ更新と高いユーザー操作性を備えたWebアプリ
SSR
SEOを重視し、コンテンツのクロールとインデックスを最適化したい場合に最適
- ECサイトの商品ページ
- ブログやメディア記事
- SEOが重要なページ
SSG
更新頻度が低く、攻撃リスクの少ない構成を望む場面に最適
- 更新頻度が低く、セキュリティの確保が必要な会社のコーポレートサイト
- ドキュメントサイト
まとめ
SPAは、動的なWebアプリに適しており、ページ遷移がスムーズですが、初回表示が遅く、SEOに弱いです。SSRはSEOを強化し、初回表示が速い一方、サーバー負荷が高く、更新頻度が高いコンテンツに適しています。SSGは高速でSEOに優れ、セキュリティも高いですが、更新頻度が低いサイトに最適です。