从静态页面到服务端渲染 -- 浅析SPA和SSR的不同

我们刚开始接触到的就是一个静态页面，比如我们写了一个html文件，放在服务器上用户就能访问了，而后面网站需要展示更多的信息，或者提供用户操作数据，因此就要接入了数据库，数据库负责数据的处理，于是就有了一些html模板引擎，用于动态的把数据插入到html节点中，这也是我们刚开始接触到的动态页面。随着前端技术的发展，后面盛行的三大框架，是属于前后端分离的单页面应用（SPA），但单页面应用由于一开始从服务端请求回来的只是一个空的html标签，所以不利于SEO，并且要等待脚本执行之后才能开始页面渲染，所以导致首屏渲染时间长，因此基于SPA的服务端渲染SSR诞生了，SSR服务端渲染可以有效的减少首屏渲染的时间，并且利于SEO。‘

 

 

传统的静态页面：

流程：将静态资源放在服务器端，用户通过url访问静态资源（相当于一份写死的数据）并加载到浏览器中

优点： 服务器压力小，占用很少资源

缺点：每展示一份数据，就要手动拟一份静态资源的数据放在服务器上，因此对于复杂的应用开发效率低，不能良好的交互

服务端职责： 服务器只需负责静态资源的存储和返回

应用场景：一般用于展示信息少和交互较少的网页

 

 

传统的动态页面：

流程： 运行后端程序并监听路由（请求路径），用户访问对应路由后端渲染对应的页面，执行相关 sql 并返回数据，模版引擎将数据插入到 html 节点中，返回 html，浏览器渲染

优点： 开发效率较高，MVC模式，可以对数据进行便利的curd

缺点： 需要搭建耦合的前后端架构，前后端职责并不明确。

服务端职责： 服务端需要程序监听路由，同步请求接口， 请求数据和渲染页面，占用内存和计算资源较多

应用场景： 内容丰富，复杂交互的动态网页，适合全栈开发。

 

 

单页面（SPA）：

流程： 服务器直接返回静态资源，浏览器加载执行相关 js，单页面框架判断路由执行对应 js 代码，所有请求异步，由前端js操作和拼接dom。

优点：开发效率高，属于MVVM模式， 服务端只需要返回静态资源。首次加载完成后页面路由被前端控制，切换路由响应快。

缺点：服务端返回一个空的需要挂载的html节点，在没有 静态资源缓存情况下，首次加载速度较慢，因为需要经历静态资源下载、js 完全执行、异步数据返回才能开始渲染页面，不利于SEO。

服务端职责： 服务器压力很小，服务端只需要返回静态页面， 网页逻辑、路由和计算由客户端处理。

应用场景：用户内容丰富，数据量大的动态网页，三大框架 react、angular 和 vue都属于单页面应用。

 

 

基于单页面的服务端渲染（SSR）

流程： 用户访问 url， node 拦截到路由，并根据路由渲染对应单页面组件生成 dom 字符串，如果有数据请求，同步获取到数据后才渲染出 dom 字符串，插入到 html 中返回客户端，客户端一开始看到的就是一个有完整数据的页面，至此服务端渲染完成。客户端 body 后的 script 标签加载单页面相关 js 文件，而后客户端进行一次单页面同构，完成对应组件 dom 的事件绑定及那些服务器端无法实现的功能，后续的交互和程序执行就完全是一个单页面应用。

优点：加快了用户首屏的加载速度， 因为服务端第一次渲染的时候，已经把关键字和标题渲染到响应的 html 中了，爬虫能够抓取到此静态内容，因此更利于 seo。

缺点： 相比纯单页面，服务器需要增加 node 服务带来的消耗。而服务器压力会比动态页面少很多，因为仅仅是用户第一次访问的时候才是服务端渲染，而后路由改变页面渲染都是被单页面控制。

应用场景： 内容丰富，复杂交互的动态网页，对首屏加载速度和SEO有要求的项目。

 

SPA和SSR的流程对比：

SPA：客户端渲染要等js代码执行完成再请求数据喧嚷页面，等待的过程页面什么都没有，就是用户看到的白屏。

SSR：服务端渲染显示向后端服务器请求数据，服务端会生成完整的首屏html返回给浏览器。

 

所以SSR相比SPA可以减少用户白屏的时间，并且更有利于SEO

 

参考文章或图片出处：

https://blog.csdn.net/saucxs/article/details/90520769