从单页应用(SPA)到服务器渲染(SSR)
从单页应用(SPA)到服务器渲染(SSR)
情景回顾
在学习Vue开发一个电商网站的管理后台时,使用到了一个组件 vue-quill-editor 主要是一个快捷的一个富文本编辑器
在使用这个组件的组件的时候看到了两种的使用方式分别是SPA和SSR,技术不够的我,只能面向百度编程🌍,那我们来看看是🐂是🐎吧！
本文分别从两者的概念，主要的不同，优劣势列举等等去分析SPA和SSR。
SPA(Single Page Web Application)[单页面应用程序]
概述
单页Web应用就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。也就是网页上通过hash(#)的变化来实现推动界面变化,通过不同的组件切换,展示所对应的功能模块,也避免了页面的重新加载
使用SPA的主流框架(MVVM:Model-View-ViewModel)
- AngularJS
- VueJS
- backone
- extjs
小知识点
<a href="target">go target</a>
<div id="target">i am target place</div>
<!--
点击a链接,文档会自动滚动到id为target的div区域中,运用在电商网站的楼层跳跃等实际当中
hash除了整个功能还有另一种含义:
指导浏览器行为但是不上传服务器
因为改变URL中的任何一个字符都会使浏览器重新去请求服务器,导致很多已经加载过的资源都会重新请求
简而言之:
[改变#后面的值不触发网页重载，但会记录到浏览器history中去。]
-->
SPA优点
- 很好的用户操作，用户不需要刷新页面，整个交互都通过AJAX向服务器发起请求,后通过服务器返回的内容进行下一步的操作
- 适合用于前后端分类开发,服务端提供API地址,前端使用对应服务的API地址和对应的请求方式,拿到数据对客户端进行渲染
SPA缺点
-
初次加载耗时多
- 在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。
-
SEO(搜索引擎优化)不友好
- 因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。使用单页面应用将大大减少搜索引擎对网站的收录。
实现一个简单的基础的SPA
主要通过 onhashchange 事件,所以我们主要监听这个事件的触发即可实现
下面是一个利用$.ajax实现的单页面切换的例子：
window.onhashchange = function(){ //监听hash值变化，实现页面变换
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash) // 通过不同的hash地址路由到对应的页面
{
case '#index':
url='partials/list.html';
break;
case '#newpage':
url='partials/newpage.html';
break;
case '#edit':
url='partials/edit.html';
break;
case '#view':
url='partials/view.html';
break;
}
$.ajax({ //根据hash值选择页面
type:'GET',
url:url,
success:function(data){
main.innerHTML=data; // 服务器拿到响应数据再渲染
}
});
}
SSR
那在上面我们已经初步的了解了SPA的一些特别之处还有弊端
那我们再来看看SSR又能够带给我们怎么样的特点呢
SSR: Server-Side Render 服务端渲染
简单的说就是: 服务端直接渲染出HTML字符串模板,浏览器可以直接通过解析该字符串模板显示页面,因此首屏的内容不在依赖JavaScript的渲染！！！
就好像我不需要再通过JS动态切换,而是服务端已经渲染好,我直接拿来就是可以使用
SSR优势
- 首屏加载时间：因为是 HTML 直出，浏览器可以直接解析该字符串模版显示页面。
- SEO 友好：正是因为服务端渲染输出到浏览器的是完备的 html 字符串，使得搜索引擎 能抓取到真实的内容，利于 SEO。
SSR缺点
-
虽然 SSR 能快速呈现页面，但是在 UI 框架（比如 React）加载成功之前，页面是没法进行 UI 交互的。
-
TTFB (Time To First Byte)，即第一字节时间会变长，因为 SSR 相对于 CSR 需要在服务端渲染出更多的 HTML 片段，因此加载时间会变长。
-
更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面，显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例，它的 renderToString() 方法是同步 CPU 绑定调用，这就意味着在它完成之前，服务器是无法处理其他请求的。因此在高并发场景，需要准备相应的服务器负载，并且做好缓存策略。
总结
SPA:
优点:
- 页面之间的切换快
- 一定程度上减少了后端服务器的压力
- 后端程序只需要提供API，不用管client是手机端还是PC端
缺点: - 首屏打开很慢，用户首次打开要下载SPA框架及应用程序的代码，然后再渲染页面
- 不利于SEO搜索引擎优化
SSR:
优点:
- 更快的响应时间，不用等待所有的js都下载完成，浏览器变成现实比较完整的页面
- 更好的SEO，我们可以将SEO的关键数据直接在后台就渲染成html，从而保证搜索引擎的爬虫能爬取到关键数据
缺点:
- 占用更多的cpu和内存资源
- 一些常用的浏览器API无法使用，比如window，document，alert等，如果使用的话需要对运行环境加以判断
- 开发调试会比较麻烦，对SPA的一些组件的生命周期的管理会变得复杂，只会执行ComponentMount之前的生命周期，第三库使用受限，学习成本大。
为什么SSR比SPA要快
服务端渲染路线
客户端渲染路线
服务器端渲染会先向后端请求数据，生成完整首屏HTML后返回给客户端
客户端渲染会等待JS下载，解析完之后再向服务器请求数据，等待过程中是什么也没有的，所以会出现首屏白页的情况
参考文档
这些文章都是我在搜索资源时,感觉能够很大程度帮助你理解一些概念，并通过简单的言语能够表达清晰,有需要的可以去查看
