在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

vuejs/core

菜单

服务器端渲染

相关源文件

本文档涵盖了 Vue.js 核心的服务器端渲染 (SSR) 和相关的客户端“水合”(hydration) 过程的实现。它解释了 Vue 组件如何在服务器上渲染，服务器生成的 HTML 如何在客户端进行水合以使其具有交互性，以及像 Suspense 和 Teleport 这样的组件的特殊注意事项。有关渲染系统的总体信息，请参阅 渲染系统。

1. Vue 中的 SSR 概述

Vue.js 中的服务器端渲染指的是从 Vue 组件在服务器上生成 HTML，然后在客户端“水合”此 HTML 以使其具有交互性的过程。这种方法结合了传统服务器渲染（更快的初始页面加载、更好的 SEO）和单页应用程序的交互性优点。

来源

  • packages/runtime-core/src/hydration.ts
  • packages/server-renderer/src/helpers/ssrRenderTeleport.ts
  • packages/server-renderer/tests/ssrTeleport.spec.ts

2. SSR 架构与工作流程

Vue 的 SSR 实现横跨服务器和客户端，每个环境承担不同的职责。

Vue SSR 过程中的关键步骤是：

  1. 服务器渲染：组件被渲染为 HTML 字符串
  2. HTML 传输：服务器将静态 HTML 传输到客户端
  3. 客户端水合：客户端通过附加事件监听器并创建 Vue 组件实例来“水合”静态 HTML

来源

  • packages/runtime-core/src/hydration.ts:91-116
  • packages/runtime-core/tests/hydration.spec.ts:40-52

3. 水合过程

水合是指将事件监听器和 Vue 组件实例附加到服务器渲染的 HTML 上，使其具有交互性，而无需重新渲染整个 DOM。

3.1 核心水合函数

水合过程始于 createHydrationFunctions 函数，该函数返回一组用于处理水合的函数。

水合函数接收一个 vnode 和一个容器，并通过 DOM 树递归地进行水合。

来源

  • packages/runtime-core/src/hydration.ts:91-116
  • packages/runtime-core/src/hydration.ts:118-134
  • packages/runtime-core/src/hydration.ts:136-365

3.2 处理水合不匹配

水合的一个关键方面是处理服务器渲染内容与客户端预期之间的不匹配。Vue 会检测并记录这些不匹配，然后自动纠正或发出警告。

常见的不匹配包括：

  • 文本内容差异
  • 缺失或多余的元素
  • 属性/类名/样式差异

不匹配处理通过以下方式确保应用程序状态的一致性：

  • 在可能的情况下采用服务器渲染的 DOM（为了性能）
  • 必要时回退到客户端渲染（为了正确性）

来源

  • packages/runtime-core/src/hydration.ts:670-729
  • packages/runtime-core/src/hydration.ts:788-883
  • packages/runtime-core/tests/hydration.spec.ts:522-555

4. SSR 中的特殊组件

Vue 在 SSR 期间对 Suspense 和 Teleport 等组件有特殊处理。

4.1 SSR 中的 Teleport

Teleport 允许在 DOM 树中的不同位置渲染内容，同时保持组件层级。在 SSR 中，Teleport 内容会：

  1. 在服务器渲染期间被收集到一个特殊的“teleports”上下文对象中
  2. 被注入到最终 HTML 的正确目标位置
  3. 并在客户端正确水合。

来源

  • packages/runtime-core/src/components/Teleport.ts:389-474
  • packages/server-renderer/src/helpers/ssrRenderTeleport.ts:9-43
  • packages/server-renderer/tests/ssrTeleport.spec.ts:8-179

4.2 SSR 中的 Suspense

Suspense 允许在渲染期间处理异步依赖。在 SSR 中，Suspense 会：

  1. 尝试渲染默认内容（等待异步组件）
  2. 如有需要，回退到备用内容
  3. 并在客户端正确水合内容。

在 SSR 中，Suspense 会尝试在服务器上完全解析异步组件，但客户端水合阶段也已准备好处理未解析的情况。

来源

  • packages/runtime-core/src/components/Suspense.ts:768-818
  • packages/runtime-core/tests/components/Suspense.spec.ts:50-179

5. 水合细节

5.1 元素水合过程

在水合元素时，Vue 会将服务器渲染的 DOM 节点与预期的虚拟 DOM 结构进行匹配。

属性的优化水合侧重于：

  • 事件监听器
  • 类名和样式绑定
  • 自定义指令
  • 组件引用

来源

  • packages/runtime-core/src/hydration.ts:367-549
  • packages/runtime-core/src/hydration.ts:551-630

5.2 Fragment 水合

Fragments（没有根元素的元素）在水合过程中需要特殊处理。

Vue 会找到服务器渲染的 fragment 边界（由特殊注释标记，如 <!--[--> 和 <!--]-->），并处理它们之间的内容。

来源

  • packages/runtime-core/src/hydration.ts:632-668
  • packages/runtime-core/tests/hydration.spec.ts:199-262

6. 性能优化

Vue 的 SSR 实现包含多项性能优化：

  1. 静态内容提升：不变化的内容只处理一次。
  2. 部分水合：只处理页面中动态的部分以实现响应性。
  3. 块树优化：跟踪并高效更新动态节点。

来源

  • packages/runtime-core/tests/rendererOptimizedMode.spec.ts:51-154
  • packages/runtime-core/tests/hydration.spec.ts:87-138

7. 常见的水合挑战

7.1 处理状态

在 SSR 和水合过程中，Vue 需要在服务器和客户端之间保持状态一致性。

  1. 服务器状态序列化：关键状态被序列化并嵌入到 HTML 中。
  2. 客户端状态重水合：客户端在水合期间恢复此状态。
  3. 异步状态处理：对于异步状态依赖需要特别注意。

7.2 生命周期钩子管理

生命周期钩子在 SSR 中的行为有所不同：

  • beforeCreate 和 created 在服务器和客户端都会运行。
  • beforeMount、mounted 以及所有其他钩子仅在客户端运行。
  • 异步组件中的钩子执行顺序可能与平时不同。

来源

  • packages/runtime-core/tests/hydration.spec.ts:734-826
  • packages/runtime-core/tests/components/Suspense.spec.ts:246-318

8. 水合过程中的错误处理

Vue 为水合问题提供了强大的错误处理机制：

  1. 警告日志：关于水合不匹配的详细警告。
  2. 恢复策略：对轻微不匹配的自动恢复。
  3. 回退渲染：对严重不匹配进行完整的客户端渲染。

来源

  • packages/runtime-core/src/hydration.ts:57-65
  • packages/runtime-core/src/hydration.ts:670-729
  • packages/runtime-core/tests/hydration.spec.ts:828-880

结论

Vue 的服务器端渲染提供了一个复杂的系统，用于在服务器上渲染组件并在客户端对其进行水合。通过仔细地将服务器渲染的 DOM 与客户端虚拟 DOM 进行匹配，并与 Suspense 和 Teleport 等特殊组件集成，Vue 提供了高性能且对开发者友好的 SSR 功能。

水合过程是此集成的关键，它允许 Vue 应用程序通过服务器渲染的 HTML 实现快速初始加载，并通过客户端水合获得完全交互性，同时保持状态一致性并妥善处理错误。