到底什么是SPA、SEO、SSR？

原文：地址

前后端分离算是最近Web开发的大趋势了，目前已经有大量的公司使用了前后端分离的开发方式。那我们就来大概谈谈前后端分离开发中必须要了解和接触的几个概念：SPA、SEO和SSR。

前后端分离：

传统的Web前后端开发大多是前端将页面写好，之后丢给后端，让后端将页面集成到项目中去。这里就存在着一个前后端耦合的问题，首先对于后端来说，不仅要写后端逻辑，还得集成前端页面（要是页面哪里再有啥问题那就更悲催了，都是泪啊~~），而对于前端来说，不是很轻松地就能看到页面的真正渲染出来的样子，显示是不利于开发调试的，这里的效率自然也成了问题。
也正是由于前后端的高耦合，使得任何一方的变化都可能会影响到另一方。
针对类似于上述的一些问题，前后端分离的思想便应运而生。

基本概念：

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

主要优点：

• 分工明确，前后端各司其职，后端专注业务逻辑和功能的实现，前端专注页面设计。
• 接口明确，并行开发，在后端接口没有实现好之前，前端完全可以自己通过Node.js的Express和koa等的Web框架模拟接口，提供测试数据。
• 提高开发效率，一定程度上减少了前后端的沟通成本撕逼

在前后端分离中，后端一般提供RESTful API，常将数据以JSON格式返回；而前端一般使用什么呢，这里便是引出了我们讨论的主题之一：SPA。

SPA概述：

SPA全称是 single page application (在百度百科和一些文章中使用的是 single page web application，经过一番查询了解，我觉得single page application才应该是它的全称)。
SPA是一种 网络应用程序(WebApp)模型。在传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新的页面，而在SPA这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。

目前常见的几个SPA框架：

• AngularJS
• React
• Vue.js

SPA的优点：

基本上前面所说的前后端分离的优点它都有，另外还有以下的一些优点

• 页面之间的切换非常快
• 一定程度上减少了后端服务器的压力（不用管页面逻辑和渲染）
• 后端程序只需要提供API，完全不用管客户端到底是Web界面还是手机等

SPA的缺点：

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

根据这几个缺点，我们便又引出了接下来讨论的两个主题，SEO和SSR，先谈谈SEO。

SEO概述：

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

常用技术

搜索引擎优化中的技术大致可以分两类：白帽技术与黑帽技术，
SEO涉及细节也很多，以下是维基百科对于一些白帽技术的介绍：

• 在每页使用一个短、独特和相关的标题。
• 编辑网页，用与该页的主题。有关的具体术语替换隐晦的字眼。这有助于该站诉求的观众群，在搜索引擎上搜索而被正确导引至该站。
• 在该站点增加相当数量的原创内容。
• 使用合理大小、准确描述的汇标，而不过度使用关键字、惊叹号、或不相关标题术语。
• 注意网址字眼，有助于搜索引擎优化。
• 确认所有页可透过正常的链接来访问，而非只能透过Java 、JavaScript或Adobe Flash应用程序访问。这可透过使用一个专属列出该站所有内容的网页达成（网站地图）
• 透过自然方式开发链接：Google不花功夫在这有点混淆不清的指南上。写封电子邮件给网站员，告诉他：您刚刚贴了一篇挺好的文章，并且请求链接，这种做法很可能为搜索引擎所认可。
• 参与其他网站的网络集团（译按：web ring 指的是有相同主题的结盟站群）──只要其它网站是独立的、分享同样题目和可比较的品质。

除去非开发细节，我们大该可以提炼出以下的信息：

• 标题： 即HTML的 标签，例如： ，在Google的相关文档中已经说明了不再使用