我们在某些 Angular 应用的 angular.json
文件里,能看到下面的代码:
prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/"]
}
}
首先,让我们来理解上述代码的作用。这是一个在 angular.json
文件中定义的 prerender
配置,该配置是用于预渲染的设置。预渲染(Prerendering)是一种在服务端生成静态 HTML 页面的策略,这样在客户端首次加载时,可以立即显示出内容,而不需要等待 JavaScript 执行完毕。这可以提高页面的首屏加载速度,同时也有助于改善 SEO,因为搜索引擎可以直接解析静态 HTML 页面内容,而不需要执行 JavaScript。
这段配置中有三个重要的部分:
-
"builder"
:指定了预渲染的构建器,这里使用的是 Angular Universal 提供的预渲染构建器@nguniversal/builders:prerender
。这个构建器的任务就是按照配置,生成静态 HTML 文件。 -
"options"
:这是预渲染的选项,提供了预渲染构建器需要的一些参数。 -
"routes"
:这是一个数组,指定了需要预渲染的路由列表。在这个例子中,只有一个元素:/
,意味着只有根路径/
需要被预渲染。
现在,让我们通过一个详细的例子来解释这段代码的作用。假设我们有一个 Angular 项目,它的根路径 /
对应的是首页,首页中有一些从服务器动态获取的内容,例如新闻列表。如果我们不使用预渲染,那么当用户访问首页时,浏览器首先需要下载和执行所有的 JavaScript 代码,然后 JavaScript 代码会向服务器发送请求获取新闻列表,然后再将新闻列表渲染到页面上。在这个过程中,用户需要等待一段时间才能看到新闻列表,这会影响用户体验,同时,搜索引擎也可能因为无法执行 JavaScript 而无法获取到新闻列表的内容。
为了解决这个问题,我们可以使用预渲染。通过预渲染,我们可以在服务器端先生成一个包含了新闻列表的静态 HTML 文件,然后当用户访问首页时,服务器直接返回这个静态 HTML 文件。这样,用户可以立即看到新闻列表,不需要等待 JavaScript 执行完毕。同时,搜索引擎也可以直接解析这个静态 HTML 文件,获取到新闻列表的内容。
在这个例子中,我们可以在 angular.json
文件中添加以下配置:
`prerender`: {
`builder`: `@nguniversal/builders:prerender`,
`options`: {
`routes`: [`/`]
}
}
这样,当我们运行预渲染命令时,Angular Universal 的预渲染构建器会根据这个配置,生成一个包含了新闻列表的静态 HTML 文件。这个静态 HTML 文件会被保存在服务器上,当用户访问首页时,服务器就可以直接返回该静态页面。
标签:prerender,rerender,渲染,静态,JavaScript,列表,HTML,机制,Angular From: https://www.cnblogs.com/sap-jerry/p/17793845.html