SPA通俗的说就是单页面应用（single page application）

优点

页面之间的切换非常快
一定程度减少了后端服务器的压力
后端程序只需要提供api，不需要客户端到底是web端还是手机等

缺点

首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。
不利于SEO搜索引擎优化

SEO通俗的说就是搜索引擎优化(search engine optimization)

SEO是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。

我们之前说SPA单页面应用，通过AJAX获取数据，这就难保证我们的页面能被搜索引擎正常收到，并且有一些搜索引擎不支持执行js和通过ajax获取数据，那就更不用提SEO了。为了解决这个问题，，SSR登场了

SSR通俗的说就是服务器端渲染(server side rendering)

优点

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

缺点

占用更多的cpu和内存资源
一些常用的浏览器的api可能无法正常使用，比如window，document，alert等，如果使用的话需要对运行环境加以判断
开发调试会有一些麻烦，因为涉及到了浏览器及服务器，对于SPA的一些组件的声明周期的管理会变得复杂
可能会由于某些因素导致服务器渲染的结果与浏览器端的结果不一致。

前后端分离的概念

传统的web前后端开发大多是前端将页面写好，让后端将页面集成到项目中，这里就存着一个前后端耦合的问题，首先对于后端来说，不仅要写后端逻辑，还得要集成前端页面。对于前端来说，也不是很轻松就能看到页面的真正渲染出来的样子，这样肯定是不利于开发调试的，效率自然也就成了问题。针对上述问题，前后端分离的思想应运而生。

基本概念

前后端根据AJAX接口进行数据的交互，目前常见的是后端直接将数据已JSON的格式返回给前端，前端根据后端服务器返回的数据，操作DOM。

主要优点

分工明确，前后端各司其职，后端专注业务逻辑和功能的实现，前端专注页面实现和渲染。
接口明确，并行开发。在后端接口没有实现好之前，前端可以自己模拟接口提供测试数据。
提高开发效率，一定程度上减少了前后端的沟通成本

总结

前后端分离降低了前端和都端的耦合度，提高了开发效率；

SPA是前后端分离中前端的一种解决方案；

SEO对于跟多网站很重要而普通的SPA又不利于SEO；

SSR的出现一定成都上解决了SPA首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。

转载于:https://www.cnblogs.com/lml-lml/p/9587903.html

SPA SEO SSR三者有什么区别相关推荐

nuxt框架Universal和Spa两种render mode的区别
如下图,官网上对于Universal 和 Spa 两种render mode的区别,并没有加以说明,相信大多数人跟我一样有点懵,不知道选什么好.虽然两个模式创建的项目看不出区别. 先给出推荐选项: U ...
前端ssr跟ssg的区别
前端渲染方案SSR / SSG 前端SSR(Server-side Rendering)与SSG(Static Site Generation)是两种不同的技术,用于提高网站性能和用户体验. SSR: ...
[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
html div p 区别,html中div br p三者有什么区别？
本篇文章给大家带来的内容是关于html中div br p三者有什么区别,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.语法不同 p和p是成对组合闭合标签: 是单一的闭合标签.以 ...
TCP三次握手、四次挥手、socket，tcp，http三者之间的区别和原理
接着上一篇文章叙述: TCP/IP连接(在互联网的通信中,永远是客户端主动连接到服务端): 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协 ...
[css] transition、animation、transform三者有什么区别？
[css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...
[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
[css] 相邻兄弟选择器.后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器. 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格)子选择器:包括父元 ...
String String.valueof() toString三者之间的区别~
String String.valueof() toString三者之间的区别~ (String )强制类型转换,使用这种方法时,需要注意的是类型必须能转成String类型.因此最好用instan ...
String StringBuilder StringBuffer三者之间的区别~~~
String StringBuilder StringBuffer三者之间的区别~~~ String是字符串常量,它是典型的immutable类,被声明final class,所有的属性都是fina ...

SPA SEO SSR三者有什么区别