浅析前后端分离

嗯。再来说一下，为什么要做前后端分离。

前端后端有两种协作方式，一种可以称之为是服务器端渲染，一种是叫做前后端分离。

这两种方式的差别是什么呢？

服务器端渲染的方式，是指在服务器端就将网页直接生成，浏览器这里拿到的是一整个网页，CSS和JS的部分是在浏览器端执行的，而网页的内容部分，也就是数据，是由服务器端生成的。

这叫做服务器端渲染。

至于你是用NodeJS，还是用PHP，还是Python，还是Java，还是NodeJS+Java,都不重要。

这是我一直都觉得，很多概念在混淆的原因，很多人都觉得说到前后端分离，就是JS和Java的分离，只要我用了JS，Java提供API，就是前后端分离了。

是这样么？不是的。

只要你的Html网页的内容是在服务器端生成的，这就是服务器端渲染的方式。你用Openresty+lua没问题。

只要你的网页是在浏览器端，内容是通过接口从后端拿到的纯数据，这就是前后端分离。

第二种方式就是，前后端分离的方式，也是刚刚说到的。浏览器端先拿到Html，然后和后端通过Ajax接口获取，或者是通过其他接口获取，无所谓。

所以两种方式的区别关键，就在于是，Html是在哪儿生成的，浏览器和服务端传递的是什么。

在前后端分离的方式，浏览器和服务端传递的是数据，而在服务器端渲染的过程中，传递的是Html网页。

弄清楚这两点的差别，再来看两种方式的好坏。

1 数据量：前后端分离中传递数据，所以传输量会小。

服务器端渲染，会传输更大的数据，而且，会有很多内容是重复的。

2 体验：前后端多了一个渲染数据的过程，服务器端省去了这个过程。这也是一直被提到的首屏渲染的问题。

3 解耦：前后端分离中，传输的是数据，Model，数据怎么展示，全部交给前端来处理，后端只负责提供数据。

服务器端渲染中，传输的是Html，后端传给前端的Model，通常是通过Hidden的Input来处理，或者是直接用模板技术生成（JSP，Velocity，freemak）等。

数据和展现并未分离，在过去，这被称之为套页面。

4 控制：网页之间有各种跳转交互，在前后端分离中，跳转的页面控制，全部是由前端来决定。跟后端完全没有关系。在服务器端渲染的方式中，大部分是由后端来决定，少部分是由前端来决定。

5 SEO：前后端分离的方式，通常的载体是SPA，所以拿到的是没有数据的空壳子，很多搜索引擎，不支持SPA方式的SEO。

而服务器端渲染的方式，因为生成的是网页，所以对SEO支持的很好。

不要小巧这个环节，这是重多前台网站放弃使用前后端分离方式的重要原因。

好了，以上5点，足以让你对前后端分离和服务器渲染两种方式有一些直观的认知了。

再举个例子：

盒马生鲜提供两种方式，一种是前后端分离，一种是服务器端渲染。

前后端分离是哪种方式呢？就是外卖或者是直接买生鲜，自己回家去做。

服务器端渲染是哪种方式呢？就是直接在盒马鲜生自己加工，直接吃，或者是带回家吃。

这里的生鲜就是数据。

做出来的食物就是Html网页。

接着看在什么样的场景下，应该使用前后端分离，很简单。

“不需要SEO的场景下，都应该使用前后端分离”。

所以在后台管理中，没有任何理由不使用前后端分离，代指SPA。

而在前台页面中，要认真考虑，不支持SEO的代价，不止几百万。

前后需要用户登录的页面，往往是不需要有SEO的，这里也可以拆解出来。

再说一下，什么是动静分离。

之前跟人讨论的时候，有人说你不懂什么叫前后端分离，就算是服务器端渲染，也可以把CSS和JS从Java代码中剥离出来。

可是这更应该叫做动静分离，跟前后端分离是完全两个含义。

动静分离主要在于部署，静态代码部署不用重启，动态代码部署需要重启，很多时候我改一个样式，不想要重启服务，不想要重新打Tag。

所以，说到前后端分离，前后端只传递数据的方式，是彻底的改变，不是什么后端前端撕逼（所有管理能解决的问题都不是技术问题），也不是什么后端不想要给前后提供数据，就是单纯的这种方式更符合前后端交互的逻辑，后端本来就只应该关心数据，和Android和IOS的交互方式一样，根本不用关心数据怎么展示。

前端说到的前后端分离，在某种程度上，就是和Android和IOS看齐。

关键点弄明白了，其他的各种好处我可以随便扯了，比如说后端提供一套API，比如说，前端部署更方便，双方开发速度更快更高效，更适合做单元测试等等等。

而题主说到的后台没有拆分，很可能的原因就是“懒”。

很多时候，我知道怎么样做是对的，但是我就是懒，这是程序员的天性，特别是在一个人开发的时候。

转自：https://www.zhihu.com/question/267014376/answer/444793972