# レンダリング戦略

Angular は SEO、パフォーマンス、インタラクティビティを最適化するために、複数のレンダリング戦略をサポートしています。

## 1. クライアントサイドレンダリング（CSR）

**デフォルト戦略。** コンテンツはブラウザで完全にレンダリングされます。

- **ユースケース**：インタラクティブなダッシュボード、社内ツール。
- **メリット**：設定が最もシンプルで、サーバーコストが低い。
- **デメリット**：SEO が弱く、初期コンテンツの表示が遅い（JS を待つ必要がある）。

## 2. 静的サイト生成（SSG / プリレンダリング）

コンテンツは**ビルド時**に静的 HTML ファイルとして事前にレンダリングされます。

- **ユースケース**：マーケティングページ、ブログ、ドキュメント。
- **メリット**：最速の初期読み込み、優れた SEO、CDN フレンドリー。
- **デメリット**：コンテンツ更新のたびに再ビルドが必要で、ユーザー固有のデータには対応できない。

## 3. サーバーサイドレンダリング（SSR）

コンテンツは**初回リクエスト**に対してサーバー上でレンダリングされます。その後のナビゲーションはクライアントサイドで行われます（SPA スタイル）。

- **ユースケース**：EC サイトの商品ページ、ニュースサイト、パーソナライズされた動的コンテンツ。
- **メリット**：優れた SEO、初期コンテンツの表示が速い。
- **デメリット**：サーバー（Node.js）が必要で、サーバーコスト/レイテンシが高い。

## ハイドレーション

ハイドレーションは、サーバーレンダリングされた HTML をブラウザでインタラクティブにするプロセスです。

- **フルハイドレーション**：アプリ全体が一度にインタラクティブになります。
- **インクリメンタルハイドレーション**：（高度）`@defer` ブロックを使用して必要に応じてパーツがインタラクティブになります。
- **イベントリプレイ**：ハイドレーション完了前に発生したユーザーイベントをキャプチャして再生します。

## 判断マトリックス

| 要件                            | 戦略                 |
| :------------------------------ | :------------------- |
| **SEO + 静的コンテンツ**        | SSG                  |
| **SEO + 動的コンテンツ**        | SSR                  |
| **SEO不要 + 高インタラクティビティ** | CSR              |
| **混在**                        | ハイブリッド（ルートベース） |