🎯 目的別の技術選定
| 要件 | 向いている技術 | 解説 |
| --------------------- | ---------------------- | ----------------------------- |
| 初期表示が速く、SEOを強くしたい | SSR / SSG | HTMLをあらかじめ生成しておくか、リクエスト時に生成する |
| コストを抑えて高速に配信したい | SSG | 静的ファイルのみで運用可能。サーバ不要 |
| 状態の変化が多く、動的なUIが必要 | CSR | クライアント上でJSが制御するSPA |
| チャットなどリアルタイム通信が必要 | CSR + API or WebSocket | サーバと常に通信。SSRは不要 |
| SEOは気にしないが、軽いUIで構築したい | CSR | 初期ロード後、すべてJSで制御 |
### 🔁 各技術の特徴比較表
| 技術 | HTML生成場所 | 実行環境 | SEO | リアルタイム対応 | 特徴 |
| ---------------------------- | -------------- | ---------------- | -------- | ---------------- | ------------------ |
| CSR（Client Side Rendering） | クライアント（ブラウザ） | 静的サーバでOK | 弱い（対策必要） | API/WebSocketで対応 | 動的UIが得意。初期表示遅め |
| SSR（Server Side Rendering） | サーバ（Node.jsなど） | Webサーバ必須 | 強い | 対応可（API経由） | 初回表示速い、SEO強い |
| SSG（Static Site Generation） | ビルド時に生成 | 静的サーバでOK | 強い | 難しい（APIで補完） | 高速＆低コスト。頻繁更新に弱い |
| SPA（Single Page Application） | クライアント | 静的サーバでOK | 弱い | 対応可 | CSRベース。柔軟性高い |
| リアルタイム通信（WebSocketなど） | サーバー常時接続 | Webサーバ or 専用サービス | 不問 | 必須 | SSRなしでも実現可（CSRでOK） |