服务器端渲染 (SSR)

相关源文件

• CHANGELOG.md
• dist/vue.common.js
• dist/vue.runtime.common.js
• package.json
• packages/compiler-sfc/package.json
• packages/server-renderer/package.json
• packages/template-compiler/package.json
• src/platforms/web/entry-compiler.ts

目的和概述

Vue.js 2.7 中的服务器端渲染 (SSR) 能够将 Vue 组件在服务器端渲染成 HTML，将完全渲染的 HTML 发送给客户端，然后将静态标记“注水（hydrate）”成客户端上完全交互式的应用程序。本文档涵盖了 Vue 2.7 的 SSR 实现、其架构、主要特性和使用模式。

SSR 提供了多项优势

• 改进的 SEO，因为搜索引擎可以抓取完全渲染的页面
• 更快的首屏内容加载时间，尤其是在较慢的设备或网络上
• 通过即时内容显示提供更好的用户体验

来源：packages/server-renderer/package.json1-44

架构

Vue 的 SSR 系统充当 Node.js 服务器环境与 Vue 运行时之间的桥梁，将组件渲染成 HTML 字符串或流，可以直接发送给客户端。

SSR 架构概览

来源：packages/server-renderer/package.json1-44

核心组件

Vue SSR 系统由几个关键组件组成

1. 服务器渲染器包：提供在服务器上渲染 Vue 应用程序的核心功能
2. 渲染函数：renderToString 和 renderToStream，用于不同的渲染方法
3. 打包渲染器：针对已编译的服务器打包文件设计的专用渲染器，可提高性能
4. 客户端注水：将事件监听器附加到服务器渲染的 DOM 上的过程

来源：packages/server-renderer/package.json1-44

技术实现

渲染模式

Vue SSR 提供两种主要的渲染模式

1. 字符串渲染

• 将整个组件树渲染为 HTML 字符串
• 使用更简单，但在渲染完成前会阻塞服务器线程
• 适用于小型应用程序或静态站点生成

2. 流式渲染

• 在渲染时以流形式传输 HTML 内容
• 不会阻塞服务器线程
• 实现渐进式渲染，浏览器可以更早地开始解析 HTML
• 更适用于大型应用程序，并改善感知性能

来源：package.json60 packages/server-renderer/package.json1-44

数据预取和状态管理

SSR 包含在服务器上预取数据并将应用程序状态传输到客户端的机制

服务器渲染的 HTML 包含序列化的应用程序状态，客户端 Vue 实例使用该状态进行初始化，从而无需在客户端再次获取相同的数据。

来源：packages/server-renderer/package.json26-34

使用模式

基本服务器渲染器用法

vue-server-renderer 包提供了 Vue 应用程序服务器端渲染的核心功能

1. 在服务器上创建 Vue 实例
2. 使用服务器渲染器将其渲染为 HTML
3. 将 HTML 发送给客户端
4. 在客户端对应用程序进行注水

构建集成

Vue 的 SSR 可以与各种构建工具集成

1. 专用构建目标:

   • Vue CLI 和 webpack 配置通常包含用于客户端和服务器构建的单独入口点
   • 服务器构建输出一个可由服务器渲染器渲染的打包文件
   • 客户端构建侧重于注水和交互性

2. 开发和测试:

   • Vue 包含用于 SSR 开发和测试的特定脚本
   • 用于开发的 dev:ssr 脚本：package.json45
   • 用于测试的 test:ssr 脚本：package.json52
   • 用于构建的 build:ssr 脚本：package.json48

来源：package.json41-62

性能考量

Vue 的 SSR 实现包含多项优化

1. 组件缓存：常用组件可以被缓存以提高渲染性能
2. 流式渲染：使用 Node.js 流可以显著改善首字节时间
3. 避免有状态单例：服务器渲染的应用程序需要避免请求之间共享状态

该包包含用于测量性能的基准测试工具

"bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js"

来源：package.json60

技术依赖

Vue 的 SSR 功能依赖于多项依赖

依赖项	目的
chalk	用于日志和错误的终端输出样式
hash-sum	为缓存生成哈希
he	HTML 实体编码/解码
lodash.template	用于 HTML 模板的模板渲染
serialize-javascript	安全地将 JavaScript 序列化并放置在 HTML 中
source-map	用于调试的源映射支持

来源：packages/server-renderer/package.json26-34

实现细节

编译器集成

Vue SSR 包含用于服务器端渲染的特定编译器功能

SSR 编译器专门为服务器渲染生成优化的渲染函数，与客户端渲染函数不同。

来源：src/platforms/web/entry-compiler.ts1-4

虚拟 DOM 渲染过程

服务器端渲染使用专门的过程将 Vue 的虚拟 DOM 转换为 HTML 字符串

在 SSR 期间只有特定的生命周期钩子会运行——特别是 beforeCreate 和 created。与 DOM 相关的钩子（如 mounted 或 updated）不会在服务器上运行。

来源：packages/server-renderer/package.json1-44

限制和注意事项

在 Vue 2.7 中使用 SSR 时，请注意以下限制

1. 平台特定代码：直接操作 DOM 的代码必须限制在仅客户端的生命周期钩子中，或用条件检查包裹
2. 浏览器特定 API：在服务器渲染期间，window 或 document 等 API 不可用
3. 异步组件：SSR 中的异步组件需要特殊处理
4. 响应性限制：SSR 中的响应性系统工作方式不同，因为没有持续的状态更新
5. 指令限制：直接操作 DOM 的自定义指令需要特殊的服务器端实现

来源：CHANGELOG.md133-137

测试

Vue 2.7 包含了针对 SSR 功能的特定测试

"test:ssr": "npm run build:ssr && vitest run server-renderer"

测试套件验证了核心渲染功能以及与 Vue 生态系统其他部分的集成。

来源：package.json52

结论

服务器端渲染是 Vue 2.7 中一项强大的功能，它弥合了传统服务器渲染应用程序与现代响应式框架之间的鸿沟。通过首先在服务器上渲染组件，应用程序可以提供更快的初始页面加载速度，同时保持 Vue 应用程序的交互性优势。