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