前后端分离的开发模式是伴随着互联网软件开发的发展而形成的。早期的互联网应用页面简单、处理逻辑简单、数据处理流程简单，整体侧重于服务端（后端）功能的实现，而前端主要是按照 UI 设计完成 HTML 静态页面模板，辅助少量的 CSS 和 JS 脚本。
以当时后端流行的开发语言 PHP 为例，通过模板引擎直接把代码嵌入到 HTML 模板页面中，由后端生成完整的页面响应内容，数据处理和用户页面展示强耦合。这也是当时前端人员普遍被歧视的原因之一，只能写写模板，实在是没啥技术含量。
然而随着互联网应用发展的越来越复杂，以及智能手机带来的划时代的应用体验，前后端不分离的开发模式应对大型网站应用的挑战越来越力不从心。主要有以下趋势：
1.互联网应用的开发组织从小规模团队（几个人）发展到几十人/几百人的规模，前后端强耦合导致开发责任界面不清晰，开发效率急剧下降，急需构建前后端分离的组织应对互联网应用快速迭代开发的要求
2.前端技术发展的突飞猛进，已经形成了独立的技术栈，不再依附于后端技术，各种前端框架不断涌现，传统的后端开发人员已经无法跟随前端技术的发展
3.以智能手机为代表的移动端成为主流的用户群体，其前端技术和 PC 端差别很大，需要满足更加灵活多变的页面展示和用户交互需求
基于技术和管理的双重原因，前后端分离的架构已逐渐成为网站应用的主流开发模式，数据处理和页面呈现分离也符合了 MVC 开发模式的精髓。
1.1.1 前后端不分离
简单说下前后端不分离开发模式。早期 Web 应用开发主要采用前后端不分离的方式，它是以后端直接渲染模板完成响应为主的一种开发模式。其高阶架构图如下。
1.浏览器向服务器发起请求
2.服务器接收到请求后去数据库中获取数据，根据查询结果渲染 HTML 模板
3.返回渲染后的 HTML 页面，或者返回一个重定向
这种模式下主要的开发工作在后端完成，前端工程师主要完成静态页面模板代码的编写，浏览器负责页面的展示，以及简单的用户交互。
前后端不分离的开发模式优缺点如下：
优点
- 服务器会完成页面上的所有数据逻辑处理和组装，客户端只需要请求不同的页面即可，http 请求次数少，适合 ADSL拨号、2G/3G 移动网络建设初期速率低、流量费用高的特点
- 在开发简单的网站时，效率非常高
- 一般一个应用只需要一个后台服务器
缺点
- 每个请求都是一个完整的 HTML，不同的请求之间存在冗余数据
- 前后端代码耦合高，前端测试依赖后端的开发进度，效率低，出现问题调试难度大，也难以厘清责任
- 响应数据是 HTML 页面，只能适应单一客户端，当需要多端支持时（例如 PC 端、移动端 IOS、Android）需要单独开发不同的页面模板，重复度高，开发效率低，维护变更的成本高
1.1.2 前后端分离
随着 AJAX 技术的出现，可以在不刷新整体页面针对局部的数据变化向服务器发送 http 请求。以及前端技术栈的飞速发展，前后端分离的开发模式逐渐成为主流。后端提供数据接口，前端通过 AJAX 请求获取数据，根据返回的数据完成页面渲染和用户交互设计。
该方式的结构图如下
这种开发方式的优缺点如下：
优点
- 前后端解耦，责任分工明确，两个团队约定好数据接口格式后，可以同时开发，提高开发效率
- 前端在没有实际数据时可以构造模拟数据进行打桩测试，不依赖后端的开发进度
- 静态资源服务器提供了公共资源文件，提供给不同页面使用，减少了冗余
- 动态数据服务器提供数据获取和接收的接口服务，通常是 JSON 数据，后端工程师只需要关注数据逻辑控制和处理
- 一个后端服务即可满足 PC 端、app、小程序等多种应用的需要
缺点
- 资源文件的请求需要各自独立的 http 连接，相对于前后端不分离模式数量急剧增加，在 2G/3G 网络时代根本无法满足，但是在 4G/5G/Wifi 大规模普及的网络时代，随着网络带宽的迅速扩展（10Mbps->100Mbps->1Gbps）和流量资费的大幅度下降，这一点已不再是瓶颈
- 需要静态文件服务器保存 CSS、JS、公共图片、音视频等公共资源文件，这类服务器只提供资源下载，通常会采用 CDN 的动态缓存技术，让用户从离他更近位置的服务器获取资源，不同的 CDN 周期性的和主服务器进行资源同步。而动态数据服务器则运行大量对数据库增删改查的操作，让用户感受到的响应时延更低，体验更好。
