このガイドは、Angularアプリケーションのさまざまな部分に対して適切なレンダリング戦略を選択するのに役立ちます。
レンダリング戦略とは？
レンダリング戦略は、AngularアプリケーションのHTMLコンテンツがいつ、どこで生成されるかを決定します。各戦略は、初期ページ読み込みパフォーマンス、インタラクティブ性、SEO機能、およびサーバーリソース使用量の間で異なるトレードオフを提供します。
Angularは、主に3つのレンダリング戦略をサポートしています。
- クライアントサイドレンダリング (CSR) - コンテンツは完全にブラウザでレンダリングされます
- 静的サイト生成 (SSG/Prerendering) - コンテンツはビルド時に事前レンダリングされます
- サーバーサイドレンダリング (SSR) - コンテンツは、ルートへの最初のリクエスト時にサーバーでレンダリングされます
クライアントサイドレンダリング (CSR)
CSRはAngularのデフォルトです。 コンテンツはJavaScriptの読み込み後にブラウザで完全にレンダリングされます。
CSRを使用するタイミング
✅ 以下に適しています:
- インタラクティブなアプリケーション（ダッシュボード、管理パネル）
- リアルタイムアプリケーション
- SEOが重要でない社内ツール
- 複雑なクライアントサイド状態を持つシングルページアプリケーション
❌ 可能な場合は、以下での使用を避けてください:
- SEOが必要な一般公開コンテンツ
- 初期読み込みパフォーマンスが重要なページ
CSRのトレードオフ
| 側面 | 影響 |
|---|---|
| SEO | 低い - JSが実行されるまでクローラーにコンテンツが表示されない |
| 初期読み込み | 遅い - 最初にJavaScriptをダウンロードして実行する必要がある |
| インタラクティブ性 | 読み込み後すぐに利用可能 |
| サーバー要件 | 一部の設定を除き最小限 |
| 複雑性 | 最もシンプル - 最小限の設定で動作するため |
静的サイト生成 (SSG/プリレンダリング)
SSGはビルド時にページを静的HTMLファイルとしてプリレンダリングします。 サーバーは初期ページロードのために事前に構築されたHTMLを送信します。ハイドレーション後、アプリケーションは従来のSPAのように完全にブラウザで実行されます。その後のナビゲーション、ルーティング変更、API呼び出しはすべて、サーバーレンダリングなしでクライアント側で行われます。
SSGを使用するタイミング
✅ 次のような場合に適しています:
- マーケティングページやランディングページ
- ブログ記事やドキュメント
- 安定したコンテンツを持つ製品カタログ
- ユーザーごとに変化しないコンテンツ
❌ 可能な場合は、次のような場合での使用を避けることを検討してください:
- ユーザー固有のコンテンツ
- 頻繁に変化するデータ
- リアルタイム情報
SSGのトレードオフ
| 側面 | 影響 |
|---|---|
| SEO | 優れている - 完全なHTMLが即座に利用可能 |
| 初期ロード | 最速 - 事前生成されたHTML |
| インタラクティブ性 | ハイドレーション完了後 |
| サーバー要件 | 提供には不要 (CDNフレンドリー) |
| ビルド時間 | 長い - すべてのページを事前に生成 |
| コンテンツ更新 | 再ビルドと再デプロイが必要 |
📖 実装: SSRガイドのビルド時プリレンダリングのカスタマイズを参照してください。
サーバーサイドレンダリング (SSR)
SSRは、ルートへの初回リクエスト時にサーバー上でHTMLを生成し、優れたSEOを備えた動的コンテンツを提供します。 サーバーはHTMLをレンダリングしてクライアントに送信します。
クライアントがページをレンダリングすると、Angularはアプリケーションをハイドレートし、その後は従来のSPAのように完全にブラウザで実行されます。その後のナビゲーション、ルート変更、API呼び出しはすべて、追加のサーバーレンダリングなしでクライアント側で行われます。
SSRを使用する場合
✅ 次の場合に適しています:
- Eコマースの商品ページ (動的な価格設定/在庫)
- ニュースサイトやソーシャルメディアフィード
- 頻繁に変化するパーソナライズされたコンテンツ
❌ 可能な場合は、次の場合に避けることを検討してください:
- 静的コンテンツ (代わりにSSGを使用)
- サーバーコストが懸念される場合
SSRのトレードオフ
| 側面 | 影響 |
|---|---|
| SEO | 優れている - クローラー向けの完全なHTML |
| 初回ロード | 高速 - コンテンツの即時表示 |
| インタラクティブ性 | ハイドレーションまで遅延 |
| サーバー要件 | サーバーが必要 |
| パーソナライゼーション | ユーザーコンテキストへの完全なアクセス |
| サーバーコスト | 高い - ルートへの初回リクエスト時にレンダリング |
📖 Implementation: SSRガイドのサーバールーティングとサーバー互換コンポーネントの作成を参照してください。
適切な戦略の選択
決定マトリクス
| 必要なもの... | この戦略を使用 | 理由 |
|---|---|---|
| SEO + 静的コンテンツ | SSG | 事前レンダリングされたHTML、最速の読み込み |
| SEO + 動的コンテンツ | SSR | ルートへの初回リクエストで最新のコンテンツ |
| SEOなし + インタラクティブ性 | CSR | 最もシンプル、サーバー不要 |
| 要件が混在 | Hybrid | ルートごとに異なる戦略 |
SSR/SSGをハイドレーションでインタラクティブにする
SSRまたはSSGを使用する場合、AngularはサーバーでレンダリングされたHTMLを「ハイドレート」してインタラクティブにします。
利用可能な戦略:
- フルハイドレーション - アプリケーション全体が一度にインタラクティブになります（デフォルト）
- インクリメンタルハイドレーション - 必要な部分がインタラクティブになります（パフォーマンス向上）
- イベントリプレイ - ハイドレーション完了前にクリックを捕捉します
📖 詳細はこちら:
- ハイドレーションガイド - 完全なハイドレーション設定
- インクリメンタルハイドレーション -
@deferブロックによる高度なハイドレーション