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的不利影响。

SPA SEO SSR三者有什么区别的更多相关文章

  1. nuxt框架Universal和Spa两种render mode的区别

    如下图,官网上对于Universal 和 Spa 两种render mode的区别,并没有加以说明,相信大多数人跟我一样有点懵,不知道选什么好.虽然两个模式创建的项目看不出区别. 先给出推荐选项: U ...

  2. vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器

    vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...

  3. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  4. $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    $POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...

  5. keydown,keypress,keyup三者之间的区别

    最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...

  6. @private、@protected与@public三者之间的区别

    @private.@protected与@public三者之间的区别 类之间关系图 @private只能够使用在声明的类当中,其子类也不能够使用用@private声明的实例变量 @protected只 ...

  7. .NET、C#和ASP.NET三者之间的区别与联系

    .NET.C#和ASP.NET三者之间的区别与联系 1..net(dot net) .net是一个平台,抽象的平台概念. 实现形式是库:①定义了基本的类型(通用类型系统CTS,common type ...

  8. iOS中NSNotification、delegate、KVO三者之间的区别与联系?

    前面分别讲了delegate.notification和KVO的实现原理,以及实际使用步骤,我们心中不禁有个疑问,他们的功能比较类似,那么在实际的编程中,如何选择这些方式呢? 在网上看到一个博客上详细 ...

  9. JVM、JRE和JDK三者间的区别和联系

    简介:我们利用JDK(调用JAVA API)开发了属于我们自己的JAVA程序后,通过JDK中的编译程序(javac)将我们的文本java文件编译成JAVA字节码,在JRE上运行这些JAVA字节码,JV ...

随机推荐

  1. Excel基础视频教程在线观看

    也许你已经在Excel中完成过上百张财务报表,也许你已利用Excel函数实现过上千次的复杂运算,也许你认为Excel也不过如此,甚至了无新意.但我们平日里无数次重复的得心应手的使用方法只不过是Exce ...

  2. java中端口号被占用的解决办法

    第一步,命令提示符号,执行命令:netstat -ano 可见,占用1099端口的进程的PID是10460. 第二步,命令提示符号,执行命令:tasklist(通过pid 10460定位) 可见,该占 ...

  3. springboot中文文档

    http://blog.geekidentity.com/spring/spring_boot_translation/ https://blog.csdn.net/zfrong/article/de ...

  4. HDU 2049 不容易系列之(4)——考新郎( 错排 )

    链接:传送门 思路:错排水题,从N个人中选出M个人进行错排,即 C(n,m)*d[m] 补充:组合数C(n,m)能用double计算吗?第二部分有解释 Part 1. 分别求出来组合数的分子和分母然后 ...

  5. 2019-03-28 SQL Server Pivot

    --现在我们是用PIVOT函数将列[WEEK]的行值转换为列,并使用聚合函数Count(TotalPrice)来统计每一个Week列在转换前有多少行数据,语句如下所示 select * from Sh ...

  6. 通过rpm安装jdk

    通过rpm安装,安装在/usr/local 1 .编辑系统环境变量 vi /etc/profile 输入i 加入内容如下: export JAVA_HOME=/usr/local/jdk1.7.0_7 ...

  7. RabbitMQ消息可靠性分析 - 简书

    原文:RabbitMQ消息可靠性分析 - 简书 有很多人问过我这么一类问题:RabbitMQ如何确保消息可靠?很多时候,笔者的回答都是:说来话长的事情何来长话短说.的确,要确保消息可靠不只是单单几句就 ...

  8. Unity 代码集锦之图片处理

    1.将Texture2D保存为jpg void TestSaveImageToJPG(Texture2D buffer) { File.WriteAllBytes("F:/output.jp ...

  9. ES6重点知识点总结(2)

    ES6重点知识点总结(2) call和apply的作用是什么?区别是什么? call和apply的功能基本相同,都是实现继承或者转换对象指针的作用: 唯一不通的是前者参数是罗列出来的,后者是存到数组中 ...

  10. 简述vuex的数据传递流程

    简述vuex的数据传递流程 当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法.actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通过comm ...