从单页应用(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 绑定调用，这就意味着在它完成之前，服务器是无法处理其他请求的。因此在高并发场景，需要准备相应的服务器负载，并且做好缓存策略。