原文链接 https://zhuanlan.zhihu.com/p/60975107

基础概念

SPA

SPA(Single Page Web Application) ：单页Web应用，就是只有一张Web页面的应用，与后台仅仅是数据的交互，不会再请求其它页面。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。
典型编写SPA的前端框架：React、Angular、Vue。


SSR

SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

CSR

CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。每次请求只请求需要的数据，不会重新渲染整个页面。

优势与劣势

优势 劣势
SSR
1. 搜索引擎可以抓取网站以获取更好的SEO
2. 初始页面加载速度快
3. 非常适合静态网站
1. 频繁的服务器请求
2. 整体缓慢的页面渲染
3. 整页重新加载
4. 不擅长网页交互
CSR
1. 擅长网页交互
2. 初始加载后网站渲染速度快
3. 非常适合web应用程序
4. 强大的jsvascript选择
1. 不利于SEO
2. 初始加载需要更多时间