8

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

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

服务器端水合图

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

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

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

这个流程我已经下来并且效果很好。我想弄清楚蓝色的步骤是如何做的。

如果我们有缓存，我想：

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

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

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

4

2 回答 2

1

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

于 2020-02-25T01:44:46.590 回答
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>

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

于 2017-03-09T03:44:38.360 回答