SSR 技术概述

简介: 服务端渲染的概念这几年可以说是炒得火热,它不是一种新型的技术,而是互联网最开始时所使用的加载技术。

13.png


前言


服务端渲染的概念这几年可以说是炒得火热,它不是一种新型的技术,而是互联网最开始时所使用的加载技术。


那么到底是什么原因,使得人们愿意拭去历史的尘埃,让服务端渲染这一古老的概念重新绽放光芒呢?


什么是服务端渲染?


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


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


12.png


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


11.png


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


总结


以上就是对 SSR 技术的一些简要介绍,总结一下就是:


  • SSR 提高 SPA 应用的首屏响应速度,有利于 SEO 优化。
  • SSR 最适用于静态展示页面,如果页面动态数据较多时需要谨慎使用。
  • 是否使用 SSR、使用到什么程度都需要开发者仔细权衡。


~本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!


你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!


知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!



相关文章
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
139 2
|
1月前
|
缓存 搜索推荐 JavaScript
|
27天前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
44 2
|
1月前
|
前端开发 JavaScript 开发者
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
53 1
|
3月前
|
前端开发 API 开发者
【前端数据革命】React与GraphQL协同工作:从理论到实践全面解析现代前端数据获取的新范式,开启高效开发之旅!
【8月更文挑战第31天】本文通过具体代码示例,介绍了如何利用 GraphQL 和 React 搭建高效的前端数据获取系统。GraphQL 作为一种新型数据查询语言,能精准获取所需数据、提供强大的类型系统、统一的 API 入口及实时数据订阅功能,有效解决了 RESTful API 在复杂前端应用中遇到的问题。通过集成 Apollo Client,React 应用能轻松实现数据查询与实时更新,大幅提升性能与用户体验。文章详细讲解了从安装配置到查询订阅的全过程,并分享了实践心得,适合各层次前端开发者学习参考。
39 0
|
4月前
|
存储 前端开发 JavaScript
深入浅出React框架:构建高效组件化网页的实战指南
【7月更文挑战第9天】在当今快速发展的前端技术领域,React凭借其强大的组件化思想、高效的虚拟DOM以及丰富的生态系统,成为了构建动态用户界面的首选框架之一。本文将带你深入浅出地探索React的核心概念,并通过实战示例,展示如何利用React构建高效、可维护的组件化网页。
168 8
|
5月前
|
搜索推荐 前端开发 JavaScript
深入理解后端开发中的服务端渲染(SSR)技术
在现代Web开发领域,服务端渲染(Server-Side Rendering, SSR)技术因其独特的性能优化和SEO优势而受到重视。本文将探讨SSR的工作原理、实现方法及其与客户端渲染(CSR)的比较,同时分析SSR在现代Web应用中面临的挑战和解决方案。通过实例分析,我们将深入了解SSR如何提升用户体验和提高搜索引擎排名,以及开发者如何在项目中有效实施SSR。
|
前端开发 JavaScript 算法
前端(七)——React框架的定位与应用场景解析
前端(七)——React框架的定位与应用场景解析
491 0
|
6月前
|
Web App开发 前端开发 JavaScript
前端技术探索与应用:构建高性能响应式网页
本文将介绍前端技术的最新发展和应用,重点探讨如何构建高性能响应式网页。通过深入解析前端框架、优化技巧以及调试工具等方面的内容,帮助读者提升网页的交互体验和加载速度,实现用户友好的界面设计。
下一篇
无影云桌面