codecamp

Angular 预渲染(Prerender)

预先渲染静态页面

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

如何预先渲染页面

要预先渲染静态页面,要先向你的应用程序添加 SSR 功能。添加 SSR 后,运行以下命令:

npm run prerender

预先渲染的构建选项

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

选项

详情

browserTarget

指定要构建的目标。

serverTarget

指定用于预先渲染的应用程序的服务器目标。

routes

定义要预先渲染的额外路由数组。

guessRoutes

构建器是否应该提取路由并猜测要渲染的路径。默认为 true

routesFile

指定一个文件,其中包含要预先渲染的所有路由的列表,以换行符分隔。如果你有大量路由,则此选项很有用。

numProcesses

指定在运行预先渲染命令时要使用的 CPU 数量。

预先渲染动态路由

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

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

  • 在命令行中提供额外的路由
  • 使用文件来提供路由
  • 预先渲染指定路由

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

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

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

使用文件提供额外路由

你可以使用文件提供路由以生成静态页面。如果你要生成的大量路由(比如电子商务应用程序的产品详细信息)可能来自外部源(数据库或 CMS),则此方法很有用。

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

比如,你可以通过使用脚本从数据库中提取 ID 并将它们保存到 ​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


Angular 服务端渲染
Angular 安全
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Angular 开发指南

Angular 特性预览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }