建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
預(yù)先渲染靜態(tài)頁(yè)面
Angular Universal 允許你預(yù)先渲染應(yīng)用程序的頁(yè)面。預(yù)先渲染是在構(gòu)建時(shí)處理動(dòng)態(tài)頁(yè)面生成靜態(tài) HTML 的過(guò)程。
創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十載品質(zhì)，值得信賴(lài)！
如何預(yù)先渲染頁(yè)面
要預(yù)先渲染靜態(tài)頁(yè)面，要先向你的應(yīng)用程序添加 SSR 功能。添加 SSR 后，運(yùn)行以下命令：
npm run prerender預(yù)先渲染的構(gòu)建選項(xiàng)
向應(yīng)用程序添加預(yù)先渲染時(shí)，可以使用以下構(gòu)建選項(xiàng)：
|
選項(xiàng) |
詳情 |
|---|---|
browserTarget |
指定要構(gòu)建的目標(biāo)。 |
serverTarget |
指定用于預(yù)先渲染的應(yīng)用程序的服務(wù)器目標(biāo)。 |
routes |
定義要預(yù)先渲染的額外路由數(shù)組。 |
guessRoutes |
構(gòu)建器是否應(yīng)該提取路由并猜測(cè)要渲染的路徑。默認(rèn)為 |
routesFile |
指定一個(gè)文件，其中包含要預(yù)先渲染的所有路由的列表，以換行符分隔。如果你有大量路由，則此選項(xiàng)很有用。 |
numProcesses |
指定在運(yùn)行預(yù)先渲染命令時(shí)要使用的 CPU 數(shù)量。 |
預(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è)：
- 在命令行中提供額外的路由
- 使用文件來(lái)提供路由
- 預(yù)先渲染指定路由
在命令行中提供額外的路由
在運(yùn)行 prerender 命令時(shí)，你可以提供額外的路由。比如：
ng run :prerender --routes /product/1 /product/2 使用文件提供額外路由
你可以使用文件提供路由以生成靜態(tài)頁(yè)面。如果你要生成的大量路由（比如電子商務(wù)應(yīng)用程序的產(chǎn)品詳細(xì)信息）可能來(lái)自外部源（數(shù)據(jù)庫(kù)或 CMS），則此方法很有用。
要使用文件來(lái)提供路由，請(qǐng)使用 ?--routes-file? 選項(xiàng)和包含路由的 ?.txt? 文件的名稱(chēng)。
比如，你可以通過(guò)使用腳本從數(shù)據(jù)庫(kù)中提取 ID 并將它們保存到 ?routes.txt? 文件來(lái)生成此文件：
/products/1
/products/555當(dāng)你的 ?.txt? 文件準(zhǔn)備好后，運(yùn)行以下命令以使用一些動(dòng)態(tài)值來(lái)預(yù)先渲染靜態(tài)文件：
ng run :prerender --routes-file routes.txt 預(yù)先渲染特定路由
你還可以將特定路由傳遞給 prerender 命令。如果你選擇此選項(xiàng)，請(qǐng)確保禁用 ?guessRoutes ?選項(xiàng)。
ng run :prerender --no-guess-routes --routes /product/1 /product/1 網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular預(yù)渲染（Prerender）
當(dāng)前地址：http://fisionsoft.com.cn/article/djsdpep.html
