首页 > 技术文章 > vue ssr

hellohello 2018-01-04 10:31 原文

https://mp.weixin.qq.com/s/v1c69bJ5PxGcqt-ZU4FVXw

https://juejin.im/entry/590ca74b2f301e006c10465f

https://www.zhihu.com/question/32524504?sort=created

vue2.0才推出vue 服务端渲染,用于提升首屏渲染速度,不过对于海量PV级的业务,直出模板的渲染效率直接影响服务端的压力

前后端分离的方式不利于网站SEO,有SEO需求的页面迫切需要服务端渲染。

node框架选型(主流):hapi、express、koa。

vue和react可以进行前后端同构,一样的逻辑不用写两份。

当前常用的模板渲染方案可以归结成两类:

  • a类:string-based (基于字符串拼接),传统,输出的就是字符串、所以可以用于生成ini、css、shell等其他文件,而不一定要是html,对于以输出页面为主的服务,这种模式还是挺不错的。

  • b类:virtual-dom-based(基于虚拟dom对象),新潮,基本上不考虑输出HTML/XML以外的东西。dom-base的模板引擎可以实现虚拟dom之类的东西,在数据变化的时候,实现最少的更新操作,而不像string-base的引擎,数据发生变化就要全部重新生成一大堆的字符串。

vue ssr 的模板是b类。

string-based模板渲染

比较好用的前端模板引擎是:https://github.com/ecomfe/etpl 和 https://aui.github.io/art-template/zh-cn/index.html

字符串渲染的性能其实也就在后端比较有意义,毕竟每一次渲染都是在消耗服务器资源,但在前端,用户只有一个,几十毫秒的渲染时间跟请求延迟比起来根本不算瓶颈

一个好的模板引擎

具备纯前端环境的解析能力

具备良好的调试能力。可以使用Source Map或其它自定义的手段直接映射回原模板片段,不过现在并没有什么模板引擎实现了这一功能

承担XSS的防范,要求默认转义和特定语法的无转义输出(用于富文本)

片段的复用

支持数据输出时的处理,如filter功能。假如数据处理放到模板渲染前用js逻辑处理,会导致业务逻辑混杂,增加维护的负担

支持动态数据,即依赖运行环境的能力(而不是模板编译的环境)

每个模板实例之间是隔离(如一个页面中多个相同的模板片段id不出现冲突)

vue ssr

这里提供了3个可运行的vue-ssr例子:https://github.com/947133297/ssr/tree/master/vue

以及我学习时的文档备注:http://www.cnblogs.com/hellohello/p/8243400.html

推荐阅读