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. 然后像之前一样进行客户端端水合作用，使页面交互。

我已经做了一些研究，但找不到有关服务器端水合作用的任何信息。我甚至查看了其他同构框架，如React和Angular 2，看看它们是否有解决方案，但都找不到。

我不介意构建这样的东西，但我需要一个正确方向的推动，所以如果有人正在开发这种类型的项目或有任何建议，将不胜感激。

- smitt04

---

你好。我可以问一下关于服务器性能的问题吗？没有缓存的情况下，每秒钟可以处理多少个请求？ - Mattia

很遗憾，我还没有时间进行基准测试，我们即将上线，等我有了一些数据后会及时报告。 - smitt04

Answer 1

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

- Visualize

Answer 2

根据文档所述，客户端水合是指：

在服务器渲染的输出中，根元素将具有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结构相匹配。在“水合”之后，最终呈现结果将是：

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

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

- Albert Zhang

---

是的，我已经成功实现了普通的SSR和客户端渲染。但如果能够从缓存中获取HTML并使用用户信息进行渲染，然后再提供给客户端就更好了。这样我们就不会看到页面闪烁，因为大多数页面对于所有用户来说都是相同的，将其缓存起来，然后在到达客户端之前只更新不同的部分就很好了。 - smitt04