Contents
Angular SSRのパフォーマンス最適化の重要性
Angular SSR（サーバーサイドレンダリング）は、SEO対策やユーザー体験向上に有効な技術ですが、大規模アプリケーションではリソースロード遅延やコード冗長化が発生しやすいです。このため、SSRの導入後も継続的なパフォーマンス最適化が必要になります。本記事では、Node.js環境下で実装可能な具体的な手法を解説します。
SSR導入時のリソースロード最適化手法
SSRは初期レンダリングに多くのリソースを消費するため、効率的なリソース管理が不可欠です。以下では具体的な戦略を紹介します。
プリレンダリングの設定ベストプラクティス
プリレンダリングにより静的HTMLを生成できますが、動的ルートや処理負荷に注意が必要です。
- 動的ルート対応：
ng build --prodで生成されたdistファイルを使用し、expressなどで静的なHTMLを配信します。 - 並列処理の導入：多数のルートがある場合は、タスクを並列化して実行時間を短縮します。
静的資産のバンドル戦略
CSSやJSファイルの最適化により読み込み時間を削減できます。
| 項目 | 推奨手法 | 補足 |
|---|---|---|
| CSS抽出 | @angular/platform-server利用 |
クライアントサイドとの差分を明確化 |
| JSバンドル | WebpackのSplitChunksプラグイン使用 | コード分割で不要なロードを回避 |
| 画像圧縮 | WebP形式 + リサイズ処理 | 画質維持下でのファイルサイズ削減 |
注意：プリレンダリング時にCSSやJSが不要に読み込まれるケースがあります。
<link rel="preload">タグで事前読み込みを指示することで、ブラウザのパフォーマンス向上が期待できます。
Angular Universalの最新バージョン対応技術
Angular Universal（SSR用ライブラリ）はバージョン更新により、パフォーマンス改善機能が追加されています。v14以降では以下のような変更点に注意が必要です。
v14以降の変更点と注意点
- Platform Serverデフォルト設定変更：
ɵɵsetComponentScope()などの内部APIの使用制限が厳しくなりました。 - RouterModule SSR対応強化：
forRoot()で定義されたルートはプリレンダリング時に自動生成されます。
Server-Side Renderingパイプラインのチューニング
Node.jsとの連携による最適化が可能です。以下に具体的な手順を示します。
- Expressサーバーのキャッシュ設定：
response.cacheControl()で静的HTMLをブラウザにキャッシュさせます。 - 非同期レンダリングプロセス：
renderModuleFactory()を使用し、HTML生成を非同期で実行します。 - 柔軟なキャッシュ戦略：動的なデータはキャッシュ対象外とすることで、効率的な管理が可能です。
クライアント・サーバーサイドコード共有パターン
Angularアプリケーションでは、クライアントとサーバーで共通するロジックを効率的に管理することが重要です。以下が設計のポイントです。
共通モジュールの設計ガイドライン
- 環境に応じた実行制御：
isPlatformBrowser()やisPlatformServer()を利用して、クライアント/サーバーで動作する処理を分離します。 - TypeScript条件型の活用：
if (typeof window !== 'undefined') { ... }などによるロジックの分岐。
Platform Detectionによるロジック分離
以下のような実装例が有効です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { isPlatformBrowser, isPlatformServer } from '@angular/common'; @Injectable() export class EnvironmentService { constructor(@Inject(PLATFORM_ID) private platformId: string) {} isClient(): boolean { return isPlatformBrowser(this.platformId); } isServer(): boolean { return isPlatformServer(this.platformId); } } |
実践例：画像ロード処理など、クライアント側でのみ必要なコードを
isClient()でラップすることで、SSR時の不必要なプロセスを回避できます。
Server Timing APIによるパフォーマンス分析方法
サーバーサイドの処理遅延は、クライアントサイドでは把握できません。Server Timing APIを利用すれば、リクエスト処理全体のボトルネックを可視化できます。
メトリクスの収集・可視化手順
- Node.jsサーバーにServer Timingヘッダーを追加：
res.setHeader('Server-Timing', 'rendering;desc="HTML生成";dur=40')のように設定。 - ブラウザでの可視化：Chrome DevToolsのNetworkタブで「Timing」セクションを開くと、
Server-Timingヘッダーが表示されます。
ボトルネックの特定事例
あるAngularアプリケーションでは、以下の改善を実施しました。
- HTML生成処理: 60ms → 35ms（キャッシュ戦略の見直し）
- データフェッチ: 80ms → 45ms（並列化による改善）
このように、Server Timing APIで詳細なメトリクスを取得することで、特定の処理に焦点を当てた最適化が可能になります。
実践的な最適化ステップ
以下に、SSRアプリケーションのパフォーマンス向上を目指す3つの実践的ステップを示します。
キャッシュ戦略の見直し
- 静的HTMLキャッシュ：Expressサーバーで
response.cacheControl('public, max-age=3600')を設定。 - 動的なデータはキャッシュ対象外：API経由での取得が必要なデータは、クライアントサイドでフェッチする。
動的インポートの活用
必要なモジュールだけをロードするようにすることで、初期読み込み量を削減できます。以下が実装例です。
|
1 2 3 4 |
import('src/app/modules/lazy.module').then(m => { // モジュールの登録処理 }); |
プリレンダリングタスクの並列化
多数のルートがある場合、以下のように並列処理で実行時間を短縮します。
|
1 2 3 |
ng build --prod && node prerender.js // prerender.js内で並列処理を実装 |
結論と今後の課題
Angular SSRのパフォーマンス最適化は、継続的な改善が求められます。特に、キャッシュ戦略やServer Timing APIの活用によりボトルネックを特定し、効率的な処理を行います。導入後も定期的なモニタリングと見直しが必要です。