前端后端协作方式 一种可以称之为是服务器端渲染,一种是叫做前后端分离。
1.服务器端渲染 服务器端渲染的方式,是指在服务器端就将网页直接生成,浏览器这里拿到的是一整个网页,CSS和JS的部分是在浏览器端执行的,而网页的内容部分,也就是数据,是由服务器端生成的。
这叫做服务器端渲染。
2.前后端分离 只要你的Html网页的内容是在服务器端生成的,这就是服务器端渲染的方式。
所以两种方式的区别关键,就在于是,Html是在哪儿生成的,浏览器和服务端传递的是什么。在前后端分离的方式,浏览器和服务端传递的是数据,而在服务器端渲染的过程中,传递的是Html网页。
3.对比:
数据量:前后端分离中传递数据,所以传输量会小。服务器端渲染,会传输更大的数据,而且,会有很多内容是重复的。 体验:前后端多了一个渲染数据的过程,服务器端省去了这个过程。这也是一直被提到的首屏渲染的问题。 前后端分离中,传输的是数据,Model,数据怎么展示,全部交给前端来处理,后端只负责提供数据。服务器端渲染中,传输的是Html,后端传给前端的Model,通常是通过Hidden的Input来处理,或者是直接用模板技术生成(JSP,Velocity,freemak)等。数据和展现并未分离,在过去,这被称之为套页面。 控制:网页之间有各种跳转交互,在前后端分离中,跳转的页面控制,全部是由前端来决定。跟后端完全没有关系。在服务器端渲染的方式中,大部分是由后端来决定,少部分是由前端来决定。 SEO:前后端分离的方式,通常的载体是SPA(单页面应用),所以拿到的是没有数据的空壳子,很多搜索引擎,不支持SPA方式的SEO。 而服务器端渲染的方式,因为生成的是网页,所以对SEO支持的很好。
在什么样的场景下,应该使用前后端分离 “不需要SEO的场景下,都应该使用前后端分离”。
所以在后台管理中,没有任何理由不使用前后端分离,代指SPA。
而在前台页面中,要认真考虑,不支持SEO的代价,不止几百万。
前后需要用户登录的页面,往往是不需要有SEO的,这里也可以拆解出来。
前后端分离的边界 前后端分离,应该是分离业务、分离开发、分离部署,前后端之间只有HTTP(S)上的JSON通信,做到松耦合。后台只需以REST或GraphQL的API向前端提供服务。
1.业务分离 随着HTML5标准越来越完善、前端框架和第三方类库越来越强大,以前很多只能在服务器端完成的事情现在都可以放到前端来做,而且放在前端可以让架构更合理。
例如,Excel数据导入。以前是需要把Excel传给服务器端,由服务器端负责解析然后导入数据库。现在前端就可以做到解析Excel,然后只需要把数据以JSON格式POST给服务器端就可以。这样做可以避免服务器端压力过大,因为每个浏览器只需要满足自己当前用户的运算资源。
如果解析Excel之后,还允许用户进行编辑,那么放在前端的优势就明显了,只需要一个数据单向流动就可以:
前端解析=》用户编辑=》POST JSON给服务器端。
如果采用服务器端解析,就需要:
发送Excel给服务器端=》服务器端解析=》返回给前端=》用户编辑=》POST JSON给服务器端。
2.开发分离 是因为随着前端的发展,编程语言、框架、开发流程、工具链、设计思路已经和服务器端开发有了很大的不同。
3.分离部署 是因为前端编译结果完全是静态资源,没必要和服务器端部署在一起,而且分离部署也有一系列优势,
前后端分离和单页面 前后端分离和单页面应用是两回事