Angular Universal lets you prerender the pages of your application. Prerendering is the process where a dynamic page is processed at build time generating static HTML.
To prerender a static page make sure to add Server-Side Rendering (SSR) capabilities to your application. For more information see the universal guide. Once SSR is added, run the following command:
npm run prerender
When you add prerendering to your application, the following build options are available:
| Options | Details |
|---|---|
browserTarget | Specify the target to build. |
serverTarget | Specify the Server target to use for prerendering the application. |
routes | Define an array of extra routes to prerender. |
guessRoutes | Whether builder should extract routes and guess which paths to render. Defaults to true. |
routesFile | Specify a file that contains a list of all routes to prerender, separated by newlines. This option is useful if you have a large number of routes. |
numProcesses | Specify the number of CPUs to be used while running the prerendering command. |
You can prerender dynamic routes. An example of a dynamic route is product/:id, where id is dynamically provided.
To prerender dynamic routes, choose one from the following options:
While running the prerender command, you can provide extra routes. For example:
ng run <app-name>:prerender --routes /product/1 /product/2
You can provide routes using a file to create static pages. This method is useful if you have a large number of routes to create. For example, product details for an e-commerce application, which might come from an external source, like a Database or Content Management System (CMS).
To provide routes using a file, use the --routes-file option with the name of a .txt file containing the routes.
For example, you could create this file by using a script to extract IDs from a database and save them to a routes.txt file:
/products/1 /products/555
When your .txt file is ready, run the following command to prerender the static files with dynamic values:
ng run <app-name>:prerender --routes-file routes.txt
You can also pass specific routes to the prerender command. If you choose this option, make sure to turn off the guessRoutes option.
ng run <app-name>:prerender --no-guess-routes --routes /product/1 /product/2
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/prerendering