使用 Vue.js 和 SSR 的服务器端水化

Question

我有一个 Vue.js 应用程序，它使用服务器端渲染 (SSR)，然后是客户端水合，效果很好。我喜欢构建同构 javascript，并认为这是未来的方式。

但还有一个问题我想解决。这是一个简单的图表：

首先我们检查是否有缓存的 HTML 响应

如果我们没有缓存，那么我们：

1. 执行服务器端渲染 (SSR) 以从 vue.js 应用程序渲染 HTML
2. 然后我们保存到缓存中
3. 并向客户端发送响应
4. 此时我们在哪里挂载 vue.js 应用并进行客户端水合。

这个流程我已经失败并且效果很好。我想弄清楚蓝色的步骤是怎么做的。

如果我们有缓存，我想：

1. 加载 html，就像客户端 hydration 一样挂载 vue.js 应用程序并更新缓存的 html 片段，然后仅对当前用户是唯一的（即帐户信息、喜欢、关注等）
2. 向客户端发送响应
3. 然后就像以前一样进行客户端水合以使页面具有交互性。

我进行了一些研究，但找不到任何有关服务器端 Hydration 的信息。我什至研究了其他同构框架，例如 react 和 angular 2，看看他们是否有解决方案但找不到。

我不介意构建这样的东西，但我需要朝着正确的方向努力，所以如果有人在做这种事情或有任何建议，非常感谢。

Answer 1

一个可行的解决方案是找出您可以缓存应用程序中的哪些组件，然后使用诸如组件级缓存 (https://ssr.vuejs.org/guide/caching.html#component-level-caching) 之类的东西来缓存非用户特定的组件，同时呈现用户特定的组件每次运行。

Answer 2

正如document 所说，客户端水合是：

在服务器渲染的输出中，根元素将具有 server-rendered="true" 属性。在客户端，当你挂载一个 Vue 实例到具有此属性的元素，它将尝试 “水合”现有的 DOM，而不是创建新的 DOM 节点。

例如服务端渲染的结果是：

<div class="app" id="app" server-rendered="true">
    <div class="labrador">Hello Labrador</labrador>
    <div class="husky"></div>
</div>

而客户端代码是：

Vue.component('husky', {
    template: '<div class="husky">Hello husky</div>'
})

var rootComp = {
    template: '' +
        '<div class="app" id="app">' +
        '    <div class="labrador"></div>' +
        '    <husky></husky>' +
        '</div>'
}

new Vue({
    el: '#app',
    render: h => h(rootComp)
})

所以客户端会发现生成的虚拟DOM树与服务器的DOM结构匹配。在“Hydration”之后，最终的渲染结果将是：

<div class="app" id="app" server-rendered="true">
    <div class="labrador">Hello Labrador</labrador>
    <div class="husky">Hello husky</div>
</div>

如您所见，这就是您想要的。