Angular 預(yù)渲染（Prerender）

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

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

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

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

npm run prerender

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

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

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

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

要預(yù)先渲染動(dòng)態(tài)路由，請(qǐng)從以下選項(xiàng)中選擇一個(gè)：

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

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

在運(yùn)行 prerender 命令時(shí)，你可以提供額外的路由。比如：

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

使用文件提供額外路由

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

要使用文件來提供路由，請(qǐng)使用 ?--routes-file? 選項(xiàng)和包含路由的 ?.txt? 文件的名稱。

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

/products/1
/products/555

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

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

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

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

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