预渲染

概述

预渲染（Prerendering）是一种在构建时生成静态 HTML 页面的技术，它可以在服务器端或构建过程中生成页面的初始状态，从而提高应用的首次加载性能和 SEO 优化。Angular 提供了对预渲染的支持，使得开发者可以在构建时生成静态页面，而不是在客户端动态生成。

为什么需要预渲染？

1. SEO 优化：搜索引擎爬虫通常不执行 JavaScript，因此动态生成的内容可能不会被正确索引。预渲染可以生成静态 HTML，确保搜索引擎能够正确抓取内容。
2. 性能提升：预渲染的页面在首次加载时不需要等待 JavaScript 执行，从而加快了页面的加载速度。
3. 更好的用户体验：用户在首次访问时可以立即看到内容，而不是等待 JavaScript 加载和执行。

预渲染的工作原理

预渲染的核心思想是在构建时生成静态 HTML 页面。Angular 使用 Angular Universal 来实现这一功能。Angular Universal 是一个服务端渲染（SSR）工具，它允许 Angular 应用在服务器上运行，生成静态 HTML 页面。

步骤

1. 安装 Angular Universal：首先，你需要安装 Angular Universal 工具。
2. 配置预渲染：在 Angular 项目中配置预渲染的路由。
3. 生成静态页面：使用 Angular CLI 命令生成静态 HTML 页面。

实践步骤

1. 安装 Angular Universal

首先，你需要在 Angular 项目中安装 Angular Universal。你可以通过 Angular CLI 来完成这一步骤。

ng add @nguniversal/express-engine

这个命令会自动安装 Angular Universal 并配置你的项目以支持服务端渲染。

2. 配置预渲染

在 angular.json 文件中，你需要配置预渲染的路由。找到 architect 部分，添加一个新的目标 prerender。

{
  "projects": {
    "your-project-name": {
      "architect": {
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "your-project-name:build",
            "serverTarget": "your-project-name:server",
            "routes": [
              "/",
              "/about",
              "/contact"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "your-project-name:build:production",
              "serverTarget": "your-project-name:server:production"
            }
          }
        }
      }
    }
  }
}

在这个配置中，routes 数组指定了需要预渲染的路由。

3. 生成静态页面

配置完成后，你可以使用 Angular CLI 命令来生成静态 HTML 页面。

ng run your-project-name:prerender

这个命令会根据你在 angular.json 中配置的路由生成静态 HTML 文件，并将其放置在 dist/browser 目录下。

代码示例

假设你有一个简单的 Angular 应用，包含以下路由：

• /
• /about
• /contact

你可以按照上述步骤配置预渲染，并在 angular.json 中指定这些路由。

{
  "projects": {
    "my-app": {
      "architect": {
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "my-app:build",
            "serverTarget": "my-app:server",
            "routes": [
              "/",
              "/about",
              "/contact"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production",
              "serverTarget": "my-app:server:production"
            }
          }
        }
      }
    }
  }
}

然后运行以下命令生成静态页面：

ng run my-app:prerender

实践练习

1. 创建一个新的 Angular 项目：使用 Angular CLI 创建一个新的 Angular 项目。
2. 添加 Angular Universal：按照上述步骤安装 Angular Universal。
3. 配置预渲染：在 angular.json 中配置预渲染的路由。
4. 生成静态页面：运行预渲染命令生成静态 HTML 页面。
5. 验证结果：检查 dist/browser 目录，确保生成了静态 HTML 文件。

总结

预渲染是一种强大的技术，可以帮助你提高 Angular 应用的性能和 SEO 优化。通过 Angular Universal，你可以轻松地在构建时生成静态 HTML 页面，从而为用户提供更快的首次加载体验。希望这篇教程能帮助你理解预渲染的基本概念和实践步骤。