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、使用到什么程度都需要开发者仔细权衡。


~本文完,感谢阅读!


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


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


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



相关文章
|
8月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
130 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
3月前
|
开发框架 小程序 JavaScript
UniApp框架适合哪些应用场景?
UniApp作为一款跨平台的移动应用开发框架,因其高效、灵活和强大的特性,适用于多种应用场景。
146 3
|
6月前
|
缓存 前端开发 JavaScript
PWA实战:从零构建高性能渐进式应用
【7月更文第28天】渐进式Web应用(PWA)是一种使用现代Web技术构建的应用程序,它具有原生应用程序的功能,例如离线访问、推送通知和安装到主屏幕的能力。本文将引导您从零开始构建一个高性能的PWA,并涵盖关键技术点,如Service Workers、缓存策略、离线支持和性能优化。
177 3
|
3月前
|
缓存 搜索推荐 JavaScript
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
55 2
|
7月前
|
搜索推荐 前端开发 JavaScript
深入理解后端开发中的服务端渲染(SSR)技术
在现代Web开发领域,服务端渲染(Server-Side Rendering, SSR)技术因其独特的性能优化和SEO优势而受到重视。本文将探讨SSR的工作原理、实现方法及其与客户端渲染(CSR)的比较,同时分析SSR在现代Web应用中面临的挑战和解决方案。通过实例分析,我们将深入了解SSR如何提升用户体验和提高搜索引擎排名,以及开发者如何在项目中有效实施SSR。
|
前端开发 JavaScript 算法
前端(七)——React框架的定位与应用场景解析
前端(七)——React框架的定位与应用场景解析
515 0
|
8月前
|
Web App开发 前端开发 JavaScript
前端技术探索与应用:构建高性能响应式网页
本文将介绍前端技术的最新发展和应用,重点探讨如何构建高性能响应式网页。通过深入解析前端框架、优化技巧以及调试工具等方面的内容,帮助读者提升网页的交互体验和加载速度,实现用户友好的界面设计。
|
8月前
|
前端开发 JavaScript 数据可视化
使用JavaScript实现复杂功能:动态数据可视化的构建
使用JavaScript实现复杂功能:动态数据可视化的构建