从零开始搭建vue-ssr系列之三:服务器渲染的奥秘

Vue全家桶都是必要的吗?

当然不是,只有Vuex是必须的,实践发现,vuex也不是必须的,使用vuex可以很方便的管理前后端共享的数据。如果要不作用vuex,可以在created中使用如下方法来获取数据

let context = this.$ssrContext ? this.$ssrContext.state : window['__INITIAL_STATE__']

注:一定要在created里面使用,如果在mounted里面使用,Node端是不认识window对象,从而报错。

为什么必须要用到vuex?
  • 你想啊,使用服务器渲染,数据必须得从服务器取,取了数据之后,怎么才能达到前后端共享数据?就得用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里面取到数据之后,对