从零开始搭建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里面取到数据之后,对<template>里面的HTML使用vue的语法进渲染,最终渲染成真正的HTML,对<style>里面的内容,使用loader,抽取成css,所以服务端渲染的成果是HTML+CSS;前端也是从vuex里面取到数据,前端的渲染主要做2件事,1.拿到数据,使用virtual-dom进行预渲染,然后和服务端渲染出来的进行比对,比对两边渲染的内容是不是一致的;2.对DOM元素的事件进行绑定,也就是回答的问题,事件在这块进行的处理。
一点小建议: 多多理解原理, 多多实践
  • 我想只有理解了原理性的东西,再看代码,再看流程,才能理解是为什么要这么搞,因为这些东西官方文档上面说的也不是很清楚,网上的例子也不少,但是很少提这块,刚开始我拿到各种例子之后,也很蒙,这写的都是啥!啥!啥!尤其是官方给的例子,根本就没有头绪。现在理清了,分享给大家,希望有帮忙,下一篇我们来看下代码实现。
Vue-SSR系列目录

从零开始搭建vue-ssr系列之一:写在前面的话

从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项

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

从零开始搭建vue-ssr系列之四:Vuex详解

从零开始搭建vue-ssr系列之五:开始第一个简单的server-render

从零开始搭建vue-ssr系列之六:一个完整的项目

阅读 12.5k

推荐阅读
奥巴驴
用户专栏

干货

75 人关注
29 篇文章
专栏主页