欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

对 Vue-SSR的理解和使用场景

程序员文章站 2022-07-03 10:16:58
定义SSR解决方案,后端渲染出完整的dom结构返回,前端拿到的内容包括首屏和spa结构,应用激活后按照spa方式运行,这种页面渲染方式被称为服务端渲染(server side render)官网上对此ssr的定义Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js...

定义

SSR解决方案,后端渲染出完整的dom结构返回,前端拿到的内容包括首屏和spa结构,应用激活后按照spa方式运行,这种页面渲染方式被称为服务端渲染(server side render)

官网上对此ssr的定义

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务端和客户端运行。

通俗解释

vue的组件是基于vnode的,整个html结构用js的vnode对象树来表达,那么服务端可以通过解析js对象树,在服务端提前生成具有实际表达作用的html字符串,在客户端(浏览器中)每次数据变化的时候通过新旧vnode对象树的对比用diff算法(vue diff算法不了解的可以去搜索一下)去寻找更新最小最优的变化集合,然后再去更新实际的dom。

关键点

代码可以在客户端运行,也可以在服务端运行,服务端渲染通俗来说就是先在服务端运行,在服务端生成html结构并返回给客户端,接下里继续由客户端代码去完成交互。

解决的问题

  • seo:搜索引擎优先爬取页面HTML结构,使用ssr时,服务端已经生成了和业务想关联的HTML,有利于seo
  • 首屏呈现:用户无需等待页面所有js加载完成就可以看到页面视图(压力来到了服务器,所以需要权衡哪些用服务端渲染,哪些交给客户端)

缺点

  • 复杂度
  • 库的支持性,代码兼容
  • 性能问题,每个请求都是n个实例的创建,不然会污染,消耗会变得很大
    • 缓存 node serve 、 nginx判断当前用户有没有过期,如果没过期的话就缓存,用刚刚的结果。
    • 降级:监控cpu、内存占用过多,就spa,返回单个的壳
  • 服务器负载变大,相对于前后端分离务器只需要提供静态资源来说,服务器负载更大,所以要慎重使用(比如一整套图表页面,相对于服务端渲染,可能用户不会在乎初始加载的前几秒,可以交由客户端使用类似于骨架屏,或者懒加载之类的提升用户体验。)

使用场景(什么时候用)

  • seo、首屏速度
    • 如果没有必要性的话,可以用预渲染插件(例如:pre-renderer)
  • 已经存在的项目,改造起来工程量比较大
    • 1.考虑用爬虫工具,比如puppeteer,让它直接从spa项目中爬出结果
    • 2.判断当前的请求是不是爬虫,浏览器引擎;如果是内部用户的花直接把spa给它
  • 全新项目 。用框架级别的例如: nuxt.js

本文地址:https://blog.****.net/dandan1924/article/details/107371170

相关标签: ssr