Vue SSR学习小结

前言

ssr即服务器端渲染,是一个有利于SEO,及首屏加载等优势的一种view层的处理。ssr简单来说就是在保持前后端分离的开发模式下,在前后端中间加一个node中间层,在node中间层对页面数据进行组装,即node层去请求后端数据,然后在html模板进行填充,完了之后就返回给客户端。缺点也有,可以参考官方文档。选取时,最好综合考虑。

为什么会出现这种技术?

当前SPA应用是彻底的将内容变成服务器端的一种服务,后端对于前端来说,就是提供动态数据的服务人员。SPA技术将内容和模板的结合放在浏览器端,内容是通过ajax异步获取的。这样的话,根据搜索引擎原理,必然导致SEO很烂。同时,如果客户端网络环境差,也会延长内容到达时间。SSR就是来解决这个问题的。这项技术已经经过充分实践了,最典型的例子就是手机淘宝app,据淘宝内部团队人员透露,目前手机淘宝app里绝大部分的页面都是SSR技术,即他们口中所说的,在服务器端和客户端之间加一个node中间层来渲染页面,手机淘宝的体验,相信绝大多数中国人都是有体验的,非常完美。

核心思想

在node层进行内容数据预取,然后在html模板中进行填充,返回客户端进行展示。

vue SPA应用的SSR构建

将spa应用处理为ssr的模式,还是有很大的复杂性的。当然,社区繁荣一片的现在,你可以使用开源的NUXT.js,来做ssr处理。要想自己有更多的项目结构控制权的话,就需要知道这些东西是怎么根据构建工具串起来的了。在我经过了几天学习官方文档之后,我试着总结一下这个串接过程。在讲述串接过程前,先需要知道vue作者的ssr构建的设计。

首先顶层上,有1个工具叫vue-server-renderer。这个模块负责支持整个构建过程必要环节的处理。这个工具下,提供了一些模块和api。在一个基本的构建过程中需要用到的有:

api: createBundleRenderer // 创建renderer,renderer的作用是将vue实例渲染成html

模块:client-plugin和server-plugin // webpack插件,分别处理客户端打包和服务器端打包

为了将相同的应用程序提供给客户端,我们使用webpack来打包构建。ssr同样也需要打包构建。因此作者的基本思路就是,对服务器端渲染打包成一个bundle,对客户端程序打包成一个bundle。在客户端发起请求的时候,返回服务器对应的渲染页面和客户端bundle,由于服务器端渲染页面已经留下了静态标记,客户端bundle会识别这个标记,并以混合模式挂载(具体怎么实现的需要去阅读源码)。

最后输出应用程序

有了构建工具构建出来的工件,可以进一步输出程序。基本思路是借助createBundleRenderer根据打包好的bundle创建一个renderer,然后在node服务器的帮助下,根据请求路径来确定一个context上下文对象,renderer再依据这个context,返回必要的静态资源给客户端用于展示。

发表评论

电子邮件地址不会被公开。 必填项已用*标注