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

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

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十載品質(zhì)，值得信賴！

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

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

npm run prerender

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

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

選項	詳情
browserTarget	指定要構(gòu)建的目標。
serverTarget	指定用于預(yù)先渲染的應(yīng)用程序的服務(wù)器目標。
routes	定義要預(yù)先渲染的額外路由數(shù)組。
guessRoutes	構(gòu)建器是否應(yīng)該提取路由并猜測要渲染的路徑。默認為 true。
routesFile	指定一個文件，其中包含要預(yù)先渲染的所有路由的列表，以換行符分隔。如果你有大量路由，則此選項很有用。
numProcesses	指定在運行預(yù)先渲染命令時要使用的 CPU 數(shù)量。

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

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

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

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

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

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

ng run :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 :prerender --routes-file routes.txt

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

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

ng run :prerender --no-guess-routes --routes /product/1 /product/1

分享文章：創(chuàng)新互聯(lián)Angular教程：Angular預(yù)渲染（Prerender）
轉(zhuǎn)載源于：http://uogjgqi.cn/article/djsdpep.html