服务器端水合与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

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

在服务器渲染的输出中，根元素将具有 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>

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