什么是 Angular 应用的 rerender 机制

举报
汪子熙 发表于 2023/11/02 14:11:29 2023/11/02
【摘要】 我们在某些 Angular 应用的 angular.json 文件里,能看到下面的代码:prerender": { "builder": "@nguniversal/builders:prerender", "options": { "routes": ["/"] }}首先,让我们来理解上述代码的作用。这是一个在 a...

我们在某些 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 文件会被保存在服务器上,当用户访问首页时,服务器就可以直接返回该静态页面。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。