关于前后端同构的新一轮探讨

首先

本文是我在研究使用nuxt进行同构的时候，读了拂晓风起写的一篇叫做# 《关于前后端同构，我的一点思路和心得（vue、nodejs、react、模版）》之后有感而发写的，其中借鉴了很多作者的观点

前后端的同构与分离

说起前后端同构，资深一点儿的前端或后端开发者都不会陌生；
下面我们就是说一下前后端同构与分离，这对cp的故事：
1、web开发的历程也是分分合合很有趣的，早些年代使用php .asp的时候，一切都是服务端渲染的；
2、再后来由于业务复杂程度提高，服务器的负载增加，为了节省服务器的资源，更大限度的利用客户端的缓存，又出现了前后端分离的模式，从而有了专业的前端开发和后端开发，此时web的特点是，js、css和html放到静态目录，也可以通过cdn扩散，并以ajax的方式去后台获取数据、在前端进行dom组装，这种开发方式沿用至今、这是一个好的工作模式，专业的人做专业的事，沿用至今，确实可以提高工作效率；
3、再而，由于nodejs的兴起，前端的js开发者蠢蠢欲动，尝试吞并web接入这个后台的前沿地盘、把后台推到更后；大概2014年后，又出现了很多nodejs直出的方案，把页面数据都一次在HTML的请求中返回，无需浏览器端再发起ajax获取数据，而且服务器端把DOM结构都渲染好，浏览器按trunk直接做图形渲染即可。不得不说，这个方案带来了很多好处：首屏速度更快，浏览器更省电。当然，随之而来的，就是更复杂的工作模式，js开发者需要做服务器端的逻辑，甚至一些代码需要同时用在浏览器和nodejs上。
4、针对上面的问题，同构的探讨就开始了......

关于同构的探讨

一般来讲，同构的目的有两个：
1、解决SEO；
2、提高用户体验、提高团队的工作效率；
如果你的项目寻求以上两点目的并符合一下的几种情况就可以考虑同构了:

一、单页应用

二、多页面纯数据展示，每一页都比较简单，没有分屏的必要

三、多页面而且每一页不是那么简单，首屏和次屏有一些HTML片段（模版）需要复用

四、还是多页面，浏览器端没有模版拼装的需求，第三种情况的变种

矛盾与统一

那么我这里要总结一下，就是前后端的同构与分离是否真的矛盾，这个事情并不绝对；我这里不会说什么根据自己公司的业务来确定就是最好的这种话：
1、前后端的分离和服务端的渲染并没有发生冲突；数据接口 api 依旧是后端提供，前后端分离是我们直接调用接口获取数据、把数据动态展示在页面上，而服务端渲染是在你从api获取数据之后然后渲染出view，也就是我们常说的nodejs直出方案；我们可以把前端 node 后端看成三个独立的个体：

我们之前认为的前后端分离

image.png

加入服务端渲染之后