2017-05-11 发布从零开始搭建vue-ssr系列之三：服务器渲染的奥秘（转）

时间 2019-11-07

标签发布开始搭建 vue ssr 系列之三服务器渲染奥秘繁體版

原文原文链接

这是我看过ssr写的最好的，连接都在低下

Vue全家桶都是必要的吗？

固然不是，javascript

只有Vuex是必须的

，实践发现， vuex也不是必须的，使用 vuex能够很方便的管理先后端共享的数据。若是要不做用 vuex，能够在 created中使用以下方法来获取数据

let context = this.$ssrContext ? this.$ssrContext.state : window['__INITIAL_STATE__']复制代码

注：必定要在created里面使用，若是在mounted里面使用，Node端是不认识window对象，从而报错。css

为何必需要用到vuex？

即然数据在服务器端已经取到了，为何还要共享到前端？

这就涉及到ssr渲染的奥秘了，按理说，服务端把数据取到以后，渲染成HTML返回到前端，这样前端就用不到这些数据了，取数据只为了渲染，这种状况只适用于纯静态的渲染，就是拿到10条数据，渲染成一个列表，这个列表上没有交互，没有click、hover等效果，可是一些有click事件，就像例子上面那样，点击每一个item，都会弹出title，这些是须要js来作的，可是vue-
ssr不能绑定javascript事件
，只能是HTML+CSS，也就是说服务器端使用vue-ssr渲染出来的返回到浏览器的也只能是HTML+CSS。再强调一次：vue-ssr渲染出来只是HTML+CSS的字符串，绑定事件须要在浏览器端来作，前端须要数据和已经渲染好的DOM作比对，从而添加上各类事件！

那事件怎么办？

这就回到了第一个问题，为何前端也须要数据，既然服务器不能增长事件，那只能前端增长喽。vue-ssr有一个比较关键的地方就是，先后必须共用同一套vue文件，也就是说一个.vue文件，前端也要用，后端也要用，为何要这样作，你们想过没有？答案：就是后端从vuex里面取到数据以后，对<template>里面的HTML使用vue的语法进渲染，最终渲染成真正的HTML，对<style>里面的内容，使用loader，抽取成css，因此服务端渲染的成果是HTML+CSS；前端也是从vuex里面取到数据，前端的渲染主要作2件事，1.拿到数据，使用virtual-dom进行预渲染，而后和服务端渲染出来的进行比对，比对两边渲染的内容是否是一致的；2.对DOM元素的事件进行绑定，也就是回答的问题，事件在这块进行的处理。

一点小建议: 多多理解原理, 多多实践

我想只有理解了原理性的东西，再看代码，再看流程，才能理解是为何要这么搞，由于这些东西官方文档上面说的也不是很清楚，网上的例子也很多，可是不多提这块，刚开始我拿到各类例子以后，也很蒙，这写的都是啥！啥！啥！尤为是官方给的例子，根本就没有头绪。如今理清了，分享给你们，但愿有帮忙，下一篇咱们来看下代码实现。

Vue-SSR系列目录