1.servlet

早期的web开发，一般是前端人员写好ui（html，css）就不管了。然后后端人员用servlet一行一行print，插入变量，拼接。

由于各种拼接太麻烦，出现了JSP。

2.JSP

JSP实际上最后也要被编译为servlet。如果我们把servlet看作是在Java中写html，那么JSP就是在html中写Java。JSP可以在html中插入变量，然后编译为servlet。

这样的问题是随着项目增大，html和Java代码耦合越来越严重，又出现模板引擎。

3.模板引擎

模板引擎有很多，比如Spring的Thymeleaf。在模板引擎中，使用 ${name} 这样模板可以实现动态加载html，这样前后端都由后端人员负责了。

这样，后端人员的工作量会很重，出现前后端分离的架构。

4.前后端分离

前端人员写html，css，JavaScript，用ajax请求数据。后端人员写接口。结构如图。

RESTful风格的这种后端接口一般是通用形式的，不能满足前端的业务逻辑，比如前端想要获取一个按照积分高低排好序的用户列表，这个操作放在浏览器js操作和后端Java操作都不是那么合适，又出现了Node.js中间层。

5.Node.js中间层

Nodejs中间层转发数据，结构如图。

这种结构是在客户端渲染的完整页面，浏览器从网站服务器获取代码再执行js请求数据，然后加载数据。存在两个问题：1.SEO不好优化，搜素引擎爬不到；2.相应速度慢。所以出现了服务端渲染。

6.服务端渲染

一般的前端框架都有服务端渲染框架，比如Vue的Nuxt.js等等。它的结构如图。服务端渲染还有一个好处，因为是在服务端渲染好的，直接发送给浏览器html代码，所以在浏览器点「查看网页源代码」不会看到js中网络请求部分，也就是说能隐藏接口，防止攻击。

附：如何判断页面是服务端渲染的还是浏览器渲染的
1、在页面上鼠标右键查看源代码，页面中看到的内容在源代码中也可以查看到，则是服务端渲染得到的，也就是服务器把完整的页面代码发送到了浏览器。
2、在页面上鼠标右键查看源代码，页面中看到的内容在源代码中不可以查看到，则是浏览器渲染得到的，也就是浏览器自己向服务器请求然后再填充的数据。

服务端渲染举例：

浏览器渲染举例：