渲染指的是客户端进程，在此过程中，Vue 会接管服务器发送的静态 HTML，并将其转换为动态 DOM，使其能够响应客户端数据变化。

由于服务器已经渲染了标记，我们显然不想丢弃它并重新创建所有 DOM 元素。相反，我们希望“渲染”静态标记并使其具有交互性。

渲染注意事项

使用 SSR + 客户端渲染时需要注意的一点是，一些特殊的 HTML 结构可能会被浏览器更改。例如，在 Vue 模板中编写以下代码时

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

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

处理渲染错误

如果您确实收到渲染错误（如在控制台中看到：“Vuejs 错误 - 客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配”），您可以尝试以下步骤

1. 在 Chrome 中显示开发者工具 (F12)
2. 加载导致“客户端渲染的虚拟 DOM 树...”警告的页面。
3. 滚动到开发者工具控制台中的警告。
4. 单击开发者工具控制台警告中 vue.runtime.esm.js 的源位置超链接。
5. 在那里设置断点（在源代码浏览器中左键单击行号）。
6. 再次使相同的警告出现。通常通过重新加载页面。如果有多个警告，您可以通过将鼠标悬停在 msg 变量上查看消息。
7. 找到您的消息并停止在断点处后，查看调用堆栈。单击向下调用的一个帧到“patch”以打开其源代码。将鼠标悬停在 patch 中执行行上方 4 行处的 hydrate 函数调用上。指向 hydrate 函数的源代码的超链接将打开。
8. 在 hydrate 函数中，从开头移动大约 15 行，设置一个断点，在 assertNodeMatch 返回 false 后返回 false 的位置。设置断点并删除所有其他断点。
9. 再次使相同的警告出现。现在，当断点命中时，执行应该在 hydrate 函数中停止。切换到开发者工具控制台并评估 elm，然后评估 vnode。这里 elm 似乎是一个服务器渲染的 DOM 元素，而 vnode 是一个虚拟 DOM 节点。 Elm 以 HTML 的形式打印出来，因此您可以找出错误发生的位置。