从单页应用(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)

1. AngularJS
2. VueJS
3. backone
4. extjs

小知识点

<a href="target">go target</a>
<div id="target">i am target place</div>
<!--
    点击a链接,文档会自动滚动到id为target的div区域中,运用在电商网站的楼层跳跃等实际当中
    hash除了整个功能还有另一种含义:
    指导浏览器行为但是不上传服务器

    因为改变URL中的任何一个字符都会使浏览器重新去请求服务器,导致很多已经加载过的资源都会重新请求

    简而言之:
    [改变#后面的值不触发网页重载，但会记录到浏览器history中去。]
 -->

SPA优点

1. 很好的用户操作，用户不需要刷新页面，整个交互都通过AJAX向服务器发起请求,后通过服务器返回的内容进行下一步的操作
2. 适合用于前后端分类开发,服务端提供API地址,前端使用对应服务的API地址和对应的请求方式,拿到数据对客户端进行渲染

SPA缺点

1. 初次加载耗时多

   • 在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。

2. 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优势

1. 首屏加载时间：因为是 HTML 直出，浏览器可以直接解析该字符串模版显示页面。
2. SEO 友好：正是因为服务端渲染输出到浏览器的是完备的 html 字符串，使得搜索引擎 能抓取到真实的内容，利于 SEO。

SSR缺点

1. 虽然 SSR 能快速呈现页面，但是在 UI 框架（比如 React）加载成功之前，页面是没法进行 UI 交互的。

2. TTFB (Time To First Byte)，即第一字节时间会变长，因为 SSR 相对于 CSR 需要在服务端渲染出更多的 HTML 片段，因此加载时间会变长。

3. 更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面，显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例，它的 renderToString() 方法是同步 CPU 绑定调用，这就意味着在它完成之前，服务器是无法处理其他请求的。因此在高并发场景，需要准备相应的服务器负载，并且做好缓存策略。

总结

---

SPA:
优点:

1. 页面之间的切换快
2. 一定程度上减少了后端服务器的压力
3. 后端程序只需要提供API，不用管client是手机端还是PC端
   缺点:
4. 首屏打开很慢，用户首次打开要下载SPA框架及应用程序的代码，然后再渲染页面
5. 不利于SEO搜索引擎优化

SSR:
优点:

1. 更快的响应时间，不用等待所有的js都下载完成，浏览器变成现实比较完整的页面
2. 更好的SEO，我们可以将SEO的关键数据直接在后台就渲染成html，从而保证搜索引擎的爬虫能爬取到关键数据

缺点:

1. 占用更多的cpu和内存资源
2. 一些常用的浏览器API无法使用，比如window，document，alert等，如果使用的话需要对运行环境加以判断
3. 开发调试会比较麻烦，对SPA的一些组件的生命周期的管理会变得复杂，只会执行ComponentMount之前的生命周期，第三库使用受限，学习成本大。

为什么SSR比SPA要快

服务端渲染路线

客户端渲染路线

服务器端渲染会先向后端请求数据，生成完整首屏HTML后返回给客户端

客户端渲染会等待JS下载，解析完之后再向服务器请求数据，等待过程中是什么也没有的，所以会出现首屏白页的情况

参考文档

这些文章都是我在搜索资源时,感觉能够很大程度帮助你理解一些概念，并通过简单的言语能够表达清晰,有需要的可以去查看

• 单页面应用（SPA）的简单介绍
• 什么是 SSR
• 简单了解SPA、SEO及CSR和SSR渲染方式
• SSR VS CSR ,一次讲个通透