嗯。再来说一下,为什么要做前后端分离。
前端后端有两种协作方式,一种可以称之为是服务器端渲染,一种是叫做前后端分离。
这两种方式的差别是什么呢?
服务器端渲染的方式,是指在服务器端就将网页直接生成,浏览器这里拿到的是一整个网页,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