Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候,一直苦于产品、客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染。
talk is cheap,show us the code!话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request)
1.浏览器端渲染Demo: https://github.com/monkeyWangs/doubanMovie
2.服务端渲染Demo:https://github.com/monkeyWangs/doubanMovie-SSR
两套代码运行结果都是为了展示豆瓣电影的,运行效果也都是差不多,下面我们来分别简单的阐述一下项目的机理:
一、浏览器端渲染豆瓣电影
首先我们用官网的脚手架搭建起来一个vue项目