译文：地址
前后端分离是近期Web开发的一大趋势，目前许多公司都在使用前后端分离的开发方式。 那么，我们来考虑一下SPA、SEO、SSR这些在前后端的分离开发中必须理解和接触的几个概念吧。
前端与后端分离：传统的Web前端开发往往是前端写页面，丢到后端，后端将页面集成到项目中。 这里有前端联轴器的问题。 首先，对于后端来说，不仅要写后端逻辑，还要整合前端的页面。 (如果页面的某个地方有什么问题，我会更伤心。 眼泪啊。 () ) ) ) ) ) ) ) ) ) )。 对于前端来说，很难看到页面的实际呈现情况。 表示不利于开发调试
因为由于前后端高的联轴器，某一方的变化可能会影响另一方。
针对上述几个问题，产生了前后端分离的思想。
基本概念：基于AJAX接口前后端进行数据交互。 目前常见的情况是后端直接将数据以JSON的形式返回前端，前端根据后端服务器返回的数据操作DOM
主要优点：分工明确，前后各司其职，后端专注于业务逻辑和功能实现，前端专注于页面设计。 在接口清晰、并行开发、后端接口未成功实现之前，前端完全自己通过Node.js的Express和koa等Web框架仿真界面进行测试提高开发效率，在一定程度上减少前后端的通信成本，使之陷入前后端分离。 后端一般提供rest风格的API，经常以JSON格式返回数据； 前端一般用什么，这里引出了我们讨论的主题之一SPA。
SPA简介：SPA全名为single page application(百度百科和一些文章使用了single page web application，调查后发现，single page
SPA是一种网络APP应用(WebApp )模型。 传统网站中，不同页面之间的切换直接从服务器上加载整个新页面，而SPA模型通过动态重写部分页面与用户交互，避免了不必要的数据交换，响应速度相对提高。
目前常见的一些SPA框架： AngularJSReactVue.jsSPA的优点：基本上具有前述的前后端分离的优点，但还有以下其他优点
页面之间切换非常快，在一定程度上减轻了后端服务器的压力。 (即使您不在乎页面逻辑和渲染，后端程序也只是提供API，与客户端是Web接口还是手机等SPA完全无关。 第一个屏幕打开得很慢是因为用户第一次加载时必须下载SPA框架和APP应用程序代码，然后才能呈现页面。 不利于SEO基于这些缺点，我们还引出了接下来要讨论的两个主题，SEO和SSR，首先谈谈SEO。
SEO简介： 3358 www.Sina.com/(http://www.Sina.com/)，中文一般翻译为搜索引擎优化。 SEO是指，为了通过理解搜索引擎的结构，即获取网站页面的方法、编制索引的方法、根据特定关键字进行检索结果的排名的方法等，提高搜索引擎内特定关键字的检索结果的排名
一般技术搜索引擎优化中的技术大致分为白帽技术和黑帽技术。
SEO中也包含了很多细节。 以下是维基百科的白帽技术介绍：
每页使用简短、唯一的相关标题。 编辑网页，使用该网页的主题。 的具体术语替换模糊语言。 这有助于该站投诉的观众群被搜索引擎检索并正确引导到该站。 在这个网站上添加相当数量的原创内容。 不要过度使用关键字、感叹号或不相关的标题术语，而是使用大小合适、编写准确的同步标志。 请注意网站上有助于优化搜索引擎的话语。 确保所有页面都可以通过常规链接访问，而不是通过Java、JavaScript或adobe flash APP应用程序访问。 它可以使用包含网站所有内容的专用网页，以自然的方式开发链接。 谷歌不会为这个混乱的指导方针费事。 给网站负责人写电子邮件，说：“你贴了正好的文章，请求了链接。 这很可能得到搜索引擎的认可。 加入其他网站的网络群(译者： web ring是指具有相同主题的联盟网站群)——只要其他网站是独立的，共享相同主题，具有可比较的质量。 除非开发细节外，我们一定能提取以下信息。
标题：即HTML的title/title标签，例如title浅谈SPA、SEO、SSR | XXX的博客/title，说明在谷歌的相关文件中已经不再使用title标签作为元While technically not a meta tag，thistagisoftenusedtogetherwiththe ' description '.thecontentsofthistagaregenerallyshownasthetion
说明： HTMLmeta标记的des
cription，例如百度百科的一个词条的 description：<meta name="description" content="通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。..."> 关键字： 即HTML<meta>标签的keywords， 例如<meta name="keywords" content="META标签 META标签作用 META标签组成 META标签属性 META标签描述设计 META标签错误 META标签标签">Google的相关文档中也没有提到过使用meta keywords， Quora也讨论过Google是否还在使用meta keywords这个问题，大部分的回答都是谷歌已经不再使用它了，但是其它的一些搜索引擎比如百度等还在使用meta keywords。
SPA与SEO的冲突前面我们谈到的SPA不利于SEO，因为就目前而言，部分搜索引擎如Google、bing等，它们的爬虫虽然已经支持执行JS甚至是通过AJAX获取数据了，但是对于异步数据的支持也还不足(也可能是搜索引擎提供商觉得没必要)，Vue SSR中是这样说的：
如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。
前面也谈到过SPA应用中，通常通过AJAX获取数据，而这里就难以保证我们的页面能被搜索引擎正常收录到。并且有一些搜索引擎不支持执行JS和通过AJAX获取数据，那就更不用提SEO了。
对于有些网站而言，SEO显得至关重要，例如主要以内容输出为主的Quora、stackoverflow、知乎和豆瓣等等，那如何才能正常使用SPA而又不影响SEO呢？标致的鞋垫曰：
技术上的问题总有技术去解决
此时，SSR便闪亮登场了！
SSR概述：SSR是 Server-Side Rendering(服务器端渲染)的缩写，在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM（这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因），但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。
SSR的优点 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。这个个人深有体会，我的博客最开始仅仅使用了Vue.js，而没有做服务端渲染，加之服务器不在大陆，第一次输入地址到看到完整的页面几乎是过了4、5秒，有时候还更长。更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。SSR的缺点 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。SSR常用框架 React 的 NextVue.js 的 Nuxt不熟悉React及Next，不作评价，我的博客便是使用了Nuxt做服务器端渲染，在此不得不说Nuxt的用法实在是太漂亮了，既有一定的约束（无规矩不成方圆），又不失扩展性，官网的文档也非常不错。
总结前后端分离降低了前端和后端的耦合度，提高了开发效率；
SPA是前后端分离中前端的一种解决方案；
SEO对与很多网站很重要而普通的SPA又不利于SEO；
SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。