黄金百战穿金甲,不破楼兰终不还

什么是vue ssr?
vue官网上对此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文件加载完成即可看见渲染的业务相关视图

压力来到了服务端这边,这也是需要做权衡的地方,需要区分哪些由服务端渲染,哪些可以交给客户端。
相关的弊端
代码兼容:对于开发人员来讲,需要去兼容代码在不同环境的运行,

vue ssr所需要的服务端环境是node,有一些客户端的对象,比如dom,windows之类的则无法使用。

服务器负载:相对于前后端分离模式下服务器只需要提供静态资源来说,

ssr需要的服务器负载更大,所以在项目中使用ssr模式要慎重,比如一整套图表页面

相对于服务端渲染,可能用户不会在乎初始加载的前几秒,可以交由客户端使用类似于骨架屏,

或者懒加载之类的提升用户体验。

谢谢观看,本篇文章主要是介绍相关概念,并不演示代码,之后我会带大家怎么实现SSR

Logo

前往低代码交流专区

更多推荐