客户端激活 (hydration)

所谓激活，指的是 Vue 接管由服务端发送的静态 HTML，并使其变为可以响应客户端数据变化的动态 DOM 的过程。

在 entry-client.js 中，我们简单地通过这行代码挂载应用：

app.mount('#app')

因为服务端已经渲染出了标记，我们显然不希望将其扔掉并重新创建所有的 DOM 元素。取而代之的是，我们想要“激活”这些静态标记并使其变得可交互。

Vue 提供了一个 createSSRApp 方法用来在客户端代码 (在这个例子中是 entry-client.js) 中告诉 Vue 激活现有的静态 HTML，而不是重新创建所有的 DOM 元素。

关于激活的注意事项

Vue 会断言客户端生成的虚拟 DOM 树与从服务器渲染出来的 DOM 结构是相匹配的。如果不匹配，则它会放弃激活的过程，抛弃已生成的 DOM 并从头开始渲染。这会在浏览器控制台产生一个警告，但网站还是能正常工作。

确保 SSR 工作的第一个关键是确保应用的状态在客户端和服务端一致。密切留意不要依赖浏览器特有的 API (如窗口宽度、设备能力或 localStorage) 或服务器特有的 API (如 Node 内置的)，且留意在不同环境下将输出不同结果的代码 (诸如时区、时间戳、规范化 URL 或生成随机数字)。详情参见编写通用的代码。

第二个关键是留意 SSR + 客户端激活时 HTML 的有效性会因浏览器不同而不同。例如在 Vue 模板中编写：

<table>
  <tr>
    <td>hi</td>
  </tr>
</table>

浏览器会在 <table> 内自动注入 <tbody>，然而通过 Vue 生成的虚拟 DOM 并不会包含 <tbody>，因此会导致不匹配。为了确保匹配正确，请确保模板中编写的 HTML 是有效的。

你可以考虑在模板的研发过程中使用诸如 W3C 标记校验服务 (opens new window) 或 HTML-validate (opens new window) 的 HTML 验证器。