细说Vue组件的服务器端渲染的过程


Posted in Javascript onMay 30, 2019
声明:需要读者对 NodeJs、Vue 服务器端渲染有一定的了解

现在,前后端分离与客户端渲染已经成为前端开发的主流模式,绝大部分的前端应用都适合用这种方式来开发,又特别是 React、Vue 等组件技术的发展,更是使这种方式深入人心。

但有一些应用,客户端渲染就会遇到一些问题了:

  • 需要做 SEO(搜索引擎优化),但客户端渲染的 html 中几乎没有可用的信息
  • 需要首屏快速加载,但客户端渲染一般是长时间的加载动画或者白屏

如果能把客户端渲染的组件化技术(React、Vue 等)与传统的后端渲染的方式有效的结合起来,两者兼具,那就太完美了。

所以,这次就来聊聊 Vue 组件的服务器端渲染。

根据社区现有的一些方案,结合自己的实践,针对团队技术力量的不同,说说不同应用场景选择方案时的优先级。

1. NodeJs 渲染中间层

一般前后端的工作流是 后端 -> 前端

传统的后端渲染模式是后端负责包括 url、接口、模板渲染等,前端与后端耦合在一起,当然这种方式正在慢慢的退出历史舞台。

主流的客户端渲染则是后端只提供接口(如有需要,可以提供必要的 url),前端与后端只通过接口交流数据,路由与渲染都在前端完成。

而 NodeJs 渲染中间层的工作流则是 后端 -> NodeJs -> 前端(NodeJs 渲染中间层由前端开发人员掌握)。

细说Vue组件的服务器端渲染的过程

这种模式下,后端只提供接口,传统的服务器端路由(url)、模板渲染则都有 NodeJs 层接管。这样,前端开发人员可以自由的决定哪些组件需要在服务器端渲染,哪些组件可以放在客户端渲染,前后端完全解耦,但又保留了服务器端渲染的功能。

这种方案最成熟的是nuxt.js。

如果有需要,大家可以自己去 nuxt.js 官方文档 看看具体的使用方法和详细的功能。

应该说,这种方式是目前最完美的一种方案,但也有一些隐患:

  • 增加了一个 NodeJs 中间层,应用性能会有所降低
  • 增加了架构的复杂度、不稳定性,也降低了应用的安全性
  • 对于高并发应用,NodeJs 层会很容易形成瓶颈
  • 对开发人员要求高了很多

所以,这种方式适合对并发量、安全性、稳定性等要求不高,但又需要做 SEO 或首屏快速加载的页面。

当然,如果你能够自己改造相关的工具,就另当别论了。

2. 保留后端模板渲染

当不能使用 NodeJs 中间层时,而又要达到 SEO 与首屏快速响应的目的时,在传统的后端模板渲染的基础上,就需要对前端的页面加以适当的改造。

2.1 首屏快速响应

首屏快速响应就意味着首屏渲染所需的数据是跟 HTML 文件一起到达浏览器的,这些数据当前是由后端模板引擎嵌入到 HTML 页面中的。

以 Java 的 freemarker 模板引擎为例:

html 中以 script 的方式获取模板的数据,这样就算是在本地调试、开发,也不会报错)。

<script>
 window.globalData = {
  stringValue: '${stringValueTplName}',
  intValue: parseInt('${intValueTplName}', 10),
 };
</script>

如果是复杂的 Json 数据或者其他复杂的模板数据(比如列表数据),则可以像下面这样接收:

<script type="text/tpl" id="tpl-script-json">
 window.tmpData = {
  jsonValue: ${jsonValueTplName},
 };
</script>

<script>
 try {
  eval(document.getElementById('tpl-script-json').innerText);
 } catch (e) {
  window.tmpData = { jsonValue: {} };
 }
 
 window.globalData = {
  jsonValue: window.tmpData.jsonValue,
 };
</script>

这样,你就可以在组件里使用 window.globalData 的数据了,而不用另外用接口获取数据,达到加快首屏渲染的目的,而且本地开发、调试也不会报错。

如果你使用了本地数据 Mock 功能,也可以很容易的与这种方式结合在一起,只要稍加改造:

  1. 在代码中定义本地和服务器两个环境,本地环境使用 Mock 数据,服务器环境使用 window.globalData
  2. 可以使用see-ajax, see-fetch 来简化这种方式的开发

此外,还有一些措施来进一步加快首屏渲染:

  • 尽量减少首屏加载的脚本文件大小,其他脚本可以按需加载
  • 如果需要,可以将 CSS、JS 内容注入到 HTML 中,这样就只会发起一个请求,也可以加快加载速度

2.2 SEO 优化

在上面加载首屏渲染的基础上,对于 SEO 优化也可以做相应的改造。

其实,在客户端渲染已慢慢成为主流开发模式的同时,搜索引擎也在跟进这种变化。

截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引,也就是说,即使是客户端渲染,但只要是同步数据渲染(非 Ajax 获取数据,比如模板数据),搜索引擎也能抓取到相应的 HTML 片段。

(国内的百度搜索与360搜索等暂时还没有跟进动态)

但为了兼容所有的搜索引擎,可以像下面改造:

先由后端模板引擎渲染一些 HTML 片段,仅给搜索引擎抓取,不作为给用户展示的页面

然后再由客户端渲染同步或异步的数据给用户展示真正的页面

<div>
 <!-- 这里放置由后端模板引擎渲染的专给搜索引擎抓取的片段,用户不可见 -->
</div>

<script>
 // 接收同步数据
 window.globalData = {
  stringValue: '${stringValueTplName}',
  intValue: parseInt('${intValueTplName}', 10),
 };
</script>

3. 导出静态 html

如果页面没有动态数据,那就好办了,直接把组件导出为静态 html,然后由客户端激活。

具体过程可以参考 官方文档。

这种方案比较好的是 nuxt.js generate 静态 HTML 文件。

目录结构:

- pages/        # 页面结构目录
 - index.vue 
 - second.vue
 - ... 
- nuxt.config.js    # 配置文件
- package.json

- dist         # 导出静态 HTML 文件的默认目录

导出静态 HTML 文件

npx nuxt generate

如果一个项目里有多个 pages,可以这样构建:

目录结构:

- nuxt.config.js    # 配置文件
- package.json

- src/
 - home/        # home 页面 
  - pages/      # 页面结构目录
   - index.vue 
   - second.vue
   - ...
   
  - dist       # 导出静态 HTML 文件的默认目录
 - about/       # about 页面 
  - pages/      # 页面结构目录
   - index.vue 
   - second.vue
   - ...
   
  - dist       # 导出静态 HTML 文件的默认目录

导出静态 HTML 文件

npx nuxt generate src/home -c ../../nuxt.config.js  # home 页面
npx nuxt generate src/about -c ../../nuxt.config.js  # about 页面

除了上面提到的这些方式外,当然还有其他的方式,比如:

使用 Chrome Headless 模式获取组件的静态 HTML,参考 react-snap, puppeteer

官方 vue-server-renderer 导出静态 HTML

4. 总结

因为模式的改变,服务器端渲染与传统的后端模板渲染工作方式有很大的不同,所以在开发时需要与后端开发人员做好沟通,避免认知上的不同导致协作不协调。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
了解JavaScript中let语句
May 30 #Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
深入了解JavaScript 私有化
May 30 #Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
Vue CL3 配置路径别名详解
May 30 #Javascript
You might like
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
浅析使用Python操作文件
2017/07/31 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python SocketServer源码深入解读
2019/09/17 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
医学生个人求职信范文
2013/09/24 职场文书
会计出纳岗位职责
2013/12/25 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
应届护士求职信范文
2014/01/26 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书