Angular 預(yù)渲染（Prerender）

預(yù)先渲染靜態(tài)頁面

Angular Universal 允許你預(yù)先渲染應(yīng)用程序的頁面。預(yù)先渲染是在構(gòu)建時處理動態(tài)頁面生成靜態(tài) HTML 的過程。

如何預(yù)先渲染頁面

要預(yù)先渲染靜態(tài)頁面，要先向你的應(yīng)用程序添加 SSR 功能。添加 SSR 后，運行以下命令：

npm run prerender

預(yù)先渲染的構(gòu)建選項

向應(yīng)用程序添加預(yù)先渲染時，可以使用以下構(gòu)建選項：

預(yù)先渲染動態(tài)路由

你還可以預(yù)先渲染動態(tài)路由。動態(tài)路由的一個例子是 ?product/:id?，其中 ?id ?是動態(tài)提供的。

要預(yù)先渲染動態(tài)路由，請從以下選項中選擇一個：

• 在命令行中提供額外的路由
• 使用文件來提供路由
• 預(yù)先渲染指定路由

在命令行中提供額外的路由

在運行 prerender 命令時，你可以提供額外的路由。比如：

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

使用文件提供額外路由

你可以使用文件提供路由以生成靜態(tài)頁面。如果你要生成的大量路由（比如電子商務(wù)應(yīng)用程序的產(chǎn)品詳細信息）可能來自外部源（數(shù)據(jù)庫或 CMS），則此方法很有用。

要使用文件來提供路由，請使用 ?--routes-file? 選項和包含路由的 ?.txt? 文件的名稱。

比如，你可以通過使用腳本從數(shù)據(jù)庫中提取 ID 并將它們保存到 ?routes.txt? 文件來生成此文件：

/products/1
/products/555

當你的 ?.txt? 文件準備好后，運行以下命令以使用一些動態(tài)值來預(yù)先渲染靜態(tài)文件：

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

預(yù)先渲染特定路由

你還可以將特定路由傳遞給 prerender 命令。如果你選擇此選項，請確保禁用 ?guessRoutes ?選項。

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