SPA与SEO的矛盾。

再谈前后端分离。我以前抱着一个观点就是技术应该避免复杂。我是反对前后端分离的。甚至一段时间对单体应用抱有一种坚持。

今天觉得前后端应该分离。我想表达出一些个人的观点。在Web中，前后端是否分离，不应该站在单一技术角度思考，也不应该站在分工角度思考。他们都不是稳定因素。

我想从一个例子出发，就是一个网站如何做SEO？ 这个例子就很能说明是否应该前后端分离。

现在的Web其实已经开始非常注重交互性。前端的框架从React到Vue本质上就是解决交互性问题。他们让Web从静态模板套数据，到jQuery用面条式代码操控DOM，终于进入可以通过数据驱动页面变化。这种页面技术方案也叫SPA。单页面应用，页面不用刷新，一直在本地工作。

这就带来了一个问题，SEO不友好。SEO涉及到爬虫程序，它通过HTTP请求获得页面，其实就是一段HTML字符串，然后从中提取数据。这就是爬虫的工作。自动前端使用交互性的框架，一切的DOM都是JavaScript动态生成的。而爬虫自己一般是不带运行JS的环境的。爬虫失效了。

如果一个网页，他对SEO不友好，基本上也关闭了自己的大门。这个矛盾应该如何解决？

我们能想出几各维度：

1. 拒绝动态性，还是保持静态网页

这里有一些例子，比如Github，使用Pajax来优化页面跳转的体验。保持了页面的克制。

但是实际上它具有特殊性，就是他的版面设计就是围绕这个而来。

实际上Gitlab作为Github更加激进，他的页面交互部分也更加复杂，于是他们逐渐引入了Vue。

2. 动态性编译成静态性 SSR

SSR就是这种思考，通过Node的环境结合前端框架的特点，实现一个把动态框架编译成模板的一个技术。 但是它存在一些问题。

由于网站是动态的，而SSR是一次编译的他是静态的。本质上他在做一个后端做的事情。

会因为引入SSR，前端的写法，用法，组件可能不支持。要因此而妥协而降低自己在前端做事情的表达上。

SSR缩短了首屏呈现的时间，可是交互的时间并没有改变依然需要加载JavaScript然后重载整个页面，用户才能交互。首屏的时间其实没那么重要。相反，可以通过PWA，本地化等方式来改进首屏时间，我觉得这个更加靠谱和彻底。

SSR的思路保有着美好的幻想，可惜他没有想到，浏览器和一个Node注定是不同的东西，而这种努力其实是一种徒劳。因为你解决了一时无法解决一世。而那些混合起来的代码最终会被替换掉，被人丢弃。生命周期就此终结。我个人觉得SSR是个思维上省事的方案。实际上他是一个非常愚蠢的方案。他是另一个极端，就是在后端模板字符串李非要嵌入式写 Vue或者jQuery式的极端。这两种极端其实毫无差别。

我们应该相信Web是要取代本地App的，Web他本来就是作为一个快速构建应用程序的技术而产生。未来的程序绝对不是静态的，他一定是一个动态的。如果我们的前端技术是Canvas呢？SVG呢？

我们是不是要开发出一个所有东西都变成字符串的一个技术？

从这里我们应该明白，web他只是刚出来的时候暂时像一个模板字符串，而后端刚好能支持。而未来的web不会是这样。更不可能因为要给SEO而妥协交互性。

SEO和交互性，他是一对矛盾。一个是静态字符串，一个是高动态的东西。所以本质上他们是两件事。

为什么他们是两件事，他们从表现上是两个样子，解读他们的——解释器也是两个东西。SEO归根结底是面向一个读字符串的爬虫写的程序。而Web是面向浏览器的一个程序。

他们在某个情况下是重合的，不代表他们在任意情况下都是一个东西。

所以SSR的方案其实是愚蠢的。为了SEO妥协互动性的表达和技术选型。

好的技术一定是带来更多自由的，而不是带来更多的约束。

3. 单独生成SEO服务

如果能接受上面的设定。应该想清楚。

构建可交互的Web，本身就是一个非常独立的事情。

构建SEO有好的Web，本身也是一个非常独立的事情。

他们独立在于解读方不同，于是他们变成两件事情。

于是我的思考是，前端应该保持自己独立的技术栈，Vue也好，React也罢，总之不应该考虑SEO。更不应该用SSR这种愚蠢的方案。他最终会被抛弃。

SEO这件事情，又要输出模板，又要做站点地图，未来可能会给更多的搜索引擎生成个性化的配置。所以SEO这件事，可以交给后端来做。后端通过数据注入不同的模板，生成不同的面向SEO的文本上传到不同平台。这个应该单独做出一个服务。

SPA是一个服务，SEO也是一个单独的服务。

前后端应该分离么？

前后端应该分离么？

是应该的。因为随着情况变得越来越复杂。他们面向的东西不同，决定了他们是不同的事情。

即使是JavaScript这种，既可以在浏览器里执行，也能在服务器中执行。其实真的一样么？其实并不一样。因为他们解释器不同。浏览器里的JavaScript和Nodejs里的JavaScript 他们就算是基本语法一样，他们使用起来日积月累表达的也不会是一样的。所以这时候，仅仅语法要素相同，实际上变成了最不重要事情。

前后端应该分离的。而思考这些事情的界限，就是在于，他们面向的是谁？他们最终是不是一回事情。

讨论前后端分离。就仿佛讨论HTML、CSS、JavaScript他们为什么要分离。 （这是一个类比，以前写界面是通过一个类，传输属性完成的，是三种混合在一起。Web三剑客的分离本质上就是对不同维度的拆解。拆解是有益的。降低耦合。）

如果我来做SEO或者前后端会如何？

前后端保持分离。

前端角色

前端的角色和形态应该是多样化的，web，客户端，命令行，手表，VR，眼镜……everywhere，任何地方，只要他有屏幕。

前端的形态最终是要面向浏览器，面向设备尺寸而决定呈现和交互。它注定是一个变化的东西。

前端的意义是在乎通过设备提供互动的交互，把一帧一帧的数据按照时间的层次序列迭加起来。

数据在后台一个接口是静态的。但是由于存在用户不断地追加数据，数据从而实现一个动态的变化和发展。

前端的任务就是提供这样一个数据运动的入口。

后端角色

后端的本质上是一个面向请求和数据的服务。后面要保持的是数据的完整性和提交。

SEO

SEO就是一个典型的数据式服务，特点就是套模板，甚至就是输出数据，XML，一些爬虫的配置…… 于是，可以交给后端的一个子服务专门提供。

这样界定才是完美的。

预言，如果SEO未来逐渐重要，应该会存在一类SEO工程师，他们的任务是 需求来临，同样一份份数据，交给前端去做交互页面。另一份交给SEO提供给爬虫和所有搜索引擎。