Vue中的SSR 服务端渲染技术概述
admin
2024-03-20 20:35:22

SSR 

全称是 Server Side Render,是指一种传统的渲染方式,就是在浏览器请求页面URL的时候,服务端将我们需要的HTML文本组装好,并返回给浏览器,这个HTML文本被浏览器解析之后,不需要经过 JavaScript 脚本的执行,即可直接构建出希望的 DOM 树并展示到页面中。

SSR 有两种模式,单页面和非单页面模式,第一种是后端首次渲染的单页面应用,第二种是完全使用后端路由的后端模版渲染模式。他们区别在于使用后端路由的程度。

与之相对的是 CSR(Client Side Render),是一种目前流行的渲染方式,它依赖的是运行在客户端的JS,用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

为什么需要 SSR ?

目前前端流行的框架大都是适用于构建 SPA(单页面应用程序),在SPA这个模型中,是通过动态地重写页面的部分与用户交互,而避免了过多的数据交换,响应速度自然相对更高。

但是,SPA应用的首屏打开速度一般都很慢,因为用户首次加载需要先下载SPA框架及应用程序的代码,然后再渲染页面,并且 SPA 应用不利于 SEO 优化。

这时候,人们想着是不是可以将应用首页先加载出来,然后让首页用不到的其他 JS 文件再慢慢加载。但是由于 JS 引擎是单线程的,数据的组装过程会受到阻塞,单靠浏览器端的话不容易实现。

SSR 重新焕发活力的契机就在于此,如果将组装数据、渲染 HTML 页面的过程放在服务端,而浏览器端只负责显示接收到的 HTML 文件,那首屏的打开速度无疑会快很多。

SSR 的优缺点

那么,SSR 技术到底有哪些优点呢?我们来列举一下:

  1. 更快的响应时间,相对于客户端渲染,服务端渲染在浏览器请求URL之后已经得到了一个带有数据的HTML文本,浏览器只需要解析HTML,直接构建DOM树就可以。
  2. 有利于 SEO ,可以将 SEO 的关键信息直接在后台就渲染成 HTML,而保证搜索引擎的爬虫都能爬取到关键数据,然后在别人使用搜索引擎搜索相关的内容时,你的网页排行能靠得更前,这样你的流量就有越高。

以上是 SSR 技术最主要的两大优点,虽有优势,但缺点也不容忽视:

  1. 相对于仅仅需要提供静态文件的服务器,SSR中使用的渲染程序自然会占用更多的CPU和内存资源。
  2. 一些常用的浏览器API可能无法正常使用,比如windowdocmentalert等,如果使用的话需要对运行的环境加以判断。
  3. 开发调试会有一些麻烦,因为涉及了浏览器及服务器,对于SPA的一些组件的生命周期的管理会变得复杂。
  4. 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

相关内容

热门资讯

教师专享福利!北京这些景区免票... 新京报讯 据首都教育消息,教师节将至,北京多家景区为老师们准备了专属免票福利!这份优惠合集已整理好,...
黑茶,喝的是一种境界与健康 在专门用来喝黑茶的茶具“飘逸杯”里,黑茶茶汤看起来并不像“黑茶”这个名字那样黑黢黢的一团。 玻璃器皿...
上海旅游节大巡游花车阵容抢先看... 2026上海旅游节大巡游9月12日外滩启幕,21辆全新主题花车携手21支境内外表演方队联袂登场,邀你...
原创 8... 上周门诊来了位 62 岁的张阿姨,得糖尿病快五年了,平时管嘴特别严,糖果、点心、甜饮料一概不碰,连水...
原创 餐... 2026年9月8日晚,南京浦口区泰冯路29号,墨语江南·阿婆菜餐厅户外帐篷里,灯火温润,其间还天降喜...