前后端的分离

发表于 分类于
本文字数： 3.3k 阅读时长 ≈ 3 分钟

（一）前后端分离

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

主要优点

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

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

（二）SPA

SPA（Single Page App）是一种网络应用程序（Web App）模型。在传统网站中，切换到不同页面需要从服务器加载一整个新的页面，而在 SPA 中只要动态重写页面需要发生变化的部分（如下图知乎页面的导航栏），从而避免了过多的数据交换，提高了响应速度。

image-20210513125706473image-20210513125723203

目前常见的几个 SPA 框架有 Angular、React、Vue。

SPA 的优点

除了上文所说的前后端分离，SPA 还有如下一些优点：

  • 页面之间的切换非常快，内容的改变不需要重新加载整个页面，对服务器的压力小
  • 完全前端组件化，前端开发不再以页面为单位，更多的采用组件化的思想，代码结构和组织更加规范化，便于修改和调整
  • 后端程序只需要提供 API，完全不用管客户端到底是 Web 界面还是手机等

SPA 的缺点

  • 首屏打开速度很慢，因为用户首次加载需要先下载 SPA 框架及应用程序的代码，然后再渲染页面。
  • 不利于 SEO
  • 页面导航不可用，如果一定要导航需要自行实线前进，后退（由于是单页面不能用浏览器的前进，后退功能，所以需要自己建立堆栈管理）

根据这几个缺点，接下来讨论的两个主题就是 SEO 和 SSR。

（三）SEO

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

常用技术

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

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

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

  • 标题：即 HTML 的 <title></title> 标签，例如： <title>浅谈SPA、SEO、SSR | XXX 的博客</title> ，在 Google 的相关文档中已经说明了不再使用<title> 标签作为 Meta，但是经常会配合 description出现在搜索的结果上

While technically not a meta tag, this tag is often used together with the “description”. The contents of this tag are generally shown as the title in search results (and of course in the user’s browser)

  • 描述：即 HTML<meta>标签的description，例如百度百科的一个词条的 description：
1
<meta name="description" content="通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。...">
  • 关键字：即 HTML<meta>标签的keywords，例如
1
<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 都下载完成，浏览器便能显示比较完整的页面。
  • 更好的 SSR，我们可以将 SEO 的关键信息直接在后台就渲染成 HTML，而保证搜索引擎的爬虫都能爬取到关键数据。

SSR 的缺点

  • 相对于仅仅需要提供静态文件的服务器，SSR 中使用的渲染程序自然会占用更多的 CPU 和内存资源
  • 一些常用的浏览器 API 可能无法正常使用，比如window、document和alert等，如果使用的话需要对运行的环境加以判断
  • 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于 SPA 的一些组件的生命周期的管理会变得复杂
  • 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

SSR 常用框架

不熟悉 React 及 Next，不作评价，我的博客便是使用了 Nuxt 做服务器端渲染，在此不得不说 Nuxt 的用法实在是太漂亮了，既有一定的约束（无规矩不成方圆），又不失扩展性，官网的文档也非常不错。

总结

前后端分离降低了前端和后端的耦合度，提高了开发效率；
SPA 是前后端分离中前端的一种解决方案；
SEO 对与很多网站很重要而普通的 SPA 又不利于 SEO；
SSR 的出现一定程度上解决了 SPA 中首屏慢的问题，又极大减少了普通 SPA 对于 SEO 的不利影响。