服务器端水合与Vue.js和SSR

Question

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

但我仍有一个问题需要解决。这是一个简单的图表：

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

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

1. 执行服务器端渲染（SSR）以从vue.js应用程序呈现HTML
2. 然后我们保存到缓存
3. 并向客户发送回复
4. 此时我们安装了vue.js应用程序并进行客户端水合作用。

这个流程我已经失败并且效果很好。我想弄清楚如何用蓝色做这个步骤。

如果我们有缓存，我想：

1. 加载html，就像客户端水合装载vue.js应用程序并更新缓存的html片段然后仅对当前用户是唯一的（即帐户信息，喜欢，跟随等）
2. 向客户发送回复
3. 然后就像之前做客户端水合作用，使页面互动。

我做了一些研究，但是找不到有关服务器端水合作用的任何信息。我甚至调查了其他异形framworks，如react和angular 2，看看他们是否有解决方案，但找不到。

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

Answer 1

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

  

在服务器渲染的输出中，根元素将具有   服务器渲染=＆＃34;真＆＃34;属性。在客户端上，当您挂载Vue时   实例到具有此属性的元素，它将尝试   ＆＃34;水合物＆＃34;现有的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结构匹配。在＆＃34; Hydration＆＃34;之后，最终的渲染结果将是：

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

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

Answer 2

一种可行的解决方案是找出应用程序中可以缓存的组件，然后采用类似组件级缓存（https://ssr.vuejs.org/guide/caching.html#component-level-caching）的方法来缓存非特定于用户的组件，同时渲染用户-每次运行中都有特定的组件。