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

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. 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

相关内容

热门资讯

从滇池晨风到老街烟火 春城避暑... 原标题:从滇池晨风到老街烟火春城避暑 不只清凉“酒杯楼”前聚集了五湖四海的游客。昆明的烟火气让游客流...
五年级女生摆摊卖奶茶,月入40... #夏季图文激励计划#在咱们小区广场,最近有个“红领巾奶茶摊”彻底火出圈!摊主是个五年级小女生,戴着鲜...
谢德全:从采煤工到悦己型白酒开... 谢德全的人生轨迹,是一部充满时代印记与个人奋斗的厚重史诗。1972年1月,19岁的谢德全踏入四川省嘉...
干炸荔枝肉:锁住童年的美味记忆 今天必须给大家唠唠我家的招牌菜——干炸荔枝肉。这道菜一上桌,那叫一个不得了,金黄酥脆的外皮,咬下去“...
水煮肉片在家做原来这么简单,学... 每次路过川菜馆,那红彤彤的水煮肉片总是让人挪不开眼,麻辣鲜香的味道直往鼻子里钻,馋得人口水直流。可一...
现炒浇头米线VS传统米线,谁才... 宝子们,今天就来唠唠现炒浇头米线和传统米线到底谁更胜一筹,这可真是个让人纠结的问题呀[困惑]。 现...
Tikcake蛋糕:用甜蜜仪式... 在商业世界的起点,一场精心策划的开业典礼不仅是品牌形象的首次亮相,更是企业价值观与团队凝聚力的集中展...
八爪鱼遇上辣椒,鲜香开胃,好吃... 辣炒八爪鱼是一道鲜香开胃的家常菜,浓郁的酱香与八爪鱼的弹嫩口感相得益彰,特别适合搭配米饭或啤酒。这道...
《从祖母厨房到世界餐桌》为读者... 中新网上海8月19日电 有时候,最深刻、最动人的连接,往往诞生于最朴素、最日常的地方——一方小小的厨...
这样泡脚看似养生,实则伤身! 现在很多人喜欢泡脚养生 但你知道吗? 泡脚看似简单,其实大有讲究 泡脚的最佳温度是多少? 哪些人群不...
角逐“厨神”!贵州习水举办避暑... 为进一步提升旅游服务品质,增强游客满意度,8月15日,贵州省习水县举办了凉风徐徐到习水·习水避暑民宿...
胡同里的味觉江湖:北京小吃隐藏... 北京胡同不仅是城市肌理的毛细血管,更是一座活态的味觉博物馆。在这片纵横交错的街巷中,豆汁儿、卤煮火烧...
黄石有个“马尔代夫”!全国网媒... 华灯初上,漂亮的风车倒映在磁湖中,欧式灯塔的灯光在空气中跃动,洁白的沙滩上孩子们正欢快地玩着沙子,游...
安顺:暑期夜经济热力十足 今夏,安顺凭借21℃的凉爽气候迎来了四面八方的游客。夜幕降临,这座城市褪去白日的喧嚣,以景区夜游、古...
这样做的鱼香茄子巨好吃,味道不... "老板,再来一碗米饭!"每次在川菜馆点鱼香茄子,最后都会忍不住喊出这句话。那油亮亮的茄子裹着红艳艳的...
原创 佟... 佟大为,这位让人惊叹的演员,仿佛拥有超长的花期。即使经过几十年光阴的洗礼,他的容貌和气质依然保持着二...
双轮驱动 “大王”归来!探索大... 大王山名片 大王山位于湘江新区坪塘街道,标准地名叫伏龙山,因远望山体酷似一伏卧的巨龙得名。由于它王气...
原创 杨... 最近,演员杨雨婷在社交媒体上分享了一组全家三口在云南旅行的美丽照片,配文简洁却意味深长:大理,我们仨...