聊一聊Vue的服务端渲染

2022-07-14 21:02:30 浏览数 (1)

我忽然明白一个家庭传承的真正意义。所谓的家学,就是让下一代,比我们更能接近真实的自己。我们所积累的财富与资源,并不是要全部交给他,而是让他在这个一切的对照之中,比我们能更快的洞察到自己真正想要的是什么,而不是虚度时光和人生。

前情回顾

上篇文章分享了的一个markDown转Html的一个问题问题,今天要聊一下基于Vue的服务端渲染的问题

聊这个问题的原因是因为最近的工作中,有同事提到了这个问题,刚好这个问题我在以前的某个时间点也尝试过。

所以就拿出来聊一聊。

什么是服务端渲染

在之前的(vue && react没有出现之前)项目中,前端开发人员的大部分工作只是把UI设计稿转为html交给phpjava的后端开发人员,后端开发人员以此html为模板,填充数据后返回整个界面,整个过程都是在服务端完成的。

后来有了ajax以及类似artTemplatehandlebar模板,前后端逐渐分离开来。前端开发通过ajax获取数据并渲染模板,后端只需提供相应的数据接口即可。

2016年开始vuereactng三大框架逐渐流行开来,前后端分离的开发模式,逐渐成为标准开发模式。

服务端渲染的优势

  • 更利于SEO

使用了VueReact或者其它MVVM框架之后,页面大多数DOM元素都是在客户端根据js动态生成,可供爬虫抓取分析的内容大大减少。另外,浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬中就可以抓取到完整页面的信息。

至于这个浏览器的爬虫原理,这个我需要找个时间去了解一下。

  • 更利于首屏渲染

首屏的渲染是node发送过来的html字符串,不依赖于js文件,这就会使用户更快的看到页面的内容。尤其是当我们的项目比较大时,打包后文件体积较大,客户端渲染加载所有所需文件时间较长,首页就会有一个很长的白屏等待时间。

服务端渲染的劣势

  • 增加服务端压力vue或者React的服务端渲染实际上是将整个应用用node实现了一遍,直接在服务端跑了一个node应用
  • 初次配置比较繁琐如果没有调研过SSR的话,配置起来会非常繁琐

如何实现vue的服务端渲染

Vue的官网上给出了具体的讲解。核心的Api是vue-server-renderer这个包提供的renderer.toString()方法。

同时需要考虑的问题有:

  • 本地开发配置生产环境配置
  • 路由的拆分
  • 状态管理
  • 样式隔离这个有可能需要考虑吧,我也忘了

给一个demo链接

vue-srr-cli我之前做的一个基于Vue的服务端渲染的项目,本来打算整成一个框架。。。。。

有兴趣的可以看看,了解一下。。。。

javascript基础知识总结

0 人点赞