プリレンダリングは、一般的に静的サイト生成 (SSG) と呼ばれ、ページをビルドプロセス中に静的なHTMLファイルにレンダリングする方法を表します。
プリレンダリングは、サーバーサイドレンダリング (SSR) と同じパフォーマンス上の利点を維持しますが、最初のバイトまでの時間 (TTFB) を短縮し、最終的にユーザー体験を向上させます。主な違いは、ページが静的コンテンツとして提供され、要求ベースのレンダリングがないという点です。
サーバーサイドレンダリングに必要なデータがすべてのユーザー間で一貫している場合、プリレンダリングは有効な代替手段となります。プリレンダリングは、各ユーザーリクエストに対してページを動的にレンダリングするのではなく、事前にレンダリングすることで積極的なアプローチをとります。
ページをプリレンダリングする方法
静的なページをプリレンダリングするには、次のAngular CLIコマンドを使用してアプリケーションにSSR機能を追加します。
ng add @angular/ssr
最初からプリレンダリング機能を持つアプリケーションを作成するには、ng new --ssr コマンドを使用します。
SSRを追加したら、ビルドコマンドを実行して静的ページを生成できます。
ng build
プリレンダリングのためのビルドオプション
アプリケーションビルダーの prerender オプションは、ブール値またはオブジェクトにでき、より詳細な設定が可能です。
オプションが false の場合、プリレンダリングは実行されません。オプションが true の場合、すべてのオプションはデフォルト値を使用します。オブジェクトの場合、各オプションを個別に設定できます。
| オプション | 詳細 | デフォルト値 |
|---|---|---|
discoverRoutes |
ビルダーが Angular Router の設定を処理して、すべてのパラメータ化されていないルートを見つけ、それらをプリレンダリングするかどうか。 | true |
routesFile |
プリレンダリングするすべてのルートのリストを改行で区切ったファイルへのパス。このオプションは、パラメータ化された URL を持つルートをプリレンダリングする場合に役立ちます。 |
{ "projects": { "my-app": { "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "prerender": { "discoverRoutes": false } } } } } }}
パラメータ化されたルートのプリレンダリング
routesFile オプションを使用して、パラメータ化されたルートをプリレンダリングできます。パラメータ化されたルートの例としては、product/:id があり、ここで id は動的に提供されます。これらのルートを指定するには、各ルートを別々の行に記述したテキストファイルに一覧表示する必要があります。
パラメータ化されたルートが多数あるアプリケーションの場合、ng build を実行する前に、スクリプトを使用してこのファイルを生成することを検討してください。
routes.txt
/products/1/products/555
routes.txt ファイルにルートを指定すると、routesFile オプションを使用して、ビルダーが製品ルートをプリレンダリングするように設定します。
{ "projects": { "my-app": { "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "prerender": { "routesFile": "routes.txt" } } } } } }}
この設定により、ng build はビルド時に /products/1 と /products/555 をプリレンダリングします。