# 预先渲染静态页面

Angular Universal 允许你预先渲染应用程序的页面。预先渲染是在构建时处理动态页面生成静态 HTML 的过程。

# 如何预先渲染页面

要预先渲染静态页面，要先向你的应用程序添加服务端渲染（SSR）功能。有关更多信息，请参阅 Universal 指南 。添加 SSR 后，运行以下命令：

npm run prerender

向应用程序添加预先渲染时，可以使用以下构建选项：

选项	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`	构建器是否应该提取路由并猜测要渲染的路径。默认为 true。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`	指定在运行预先渲染命令时要使用的 CPU 数量。Specify the number of CPUs to be used while running the prerendering command.

你还可以预先渲染动态路由。动态路由的一个例子是 product/:id，其中 id是动态提供的。

要预先渲染动态路由，请从以下选项中选择一个：

在运行 prerender 命令时，你可以提供额外的路由。比如：

ng run <app-name>:prerender --routes /product/1 /product/2

你可以使用文件提供路由以创建静态页面。如果你要创建的大量路由（比如电子商务应用程序的产品详细信息）可能来自外部源，比如数据库或内容管理系统（CMS），则此方法很有用。

要使用文件来提供路由，请使用 --routes-file选项和包含路由的 .txt文件的名称。

比如，你可以通过使用脚本从数据库中提取 ID 并将它们保存到 routes.txt文件来创建此文件：

routes.txt

/products/1
/products/555

当你的 .txt文件准备好后，运行以下命令以使用一些动态值来预先渲染静态文件：

ng run <app-name>:prerender --routes-file routes.txt

你还可以将特定路由传递给 prerender 命令。如果你选择此选项，请确保关闭 guessRoutes选项。

ng run <app-name>:prerender --no-guess-routes --routes /product/1 /product/1