今天开始来简单聊一下web前端开发所接触的四种页面渲染形式，所有的web开发人员都在搞这四种中的一种或者几种。

好吧，先看一下四种页面渲染形式是哪四种。

【本文的讲解思路】先逐一聊一下四种渲染方式的开发思路和优缺点，最后，说一下在我们平时工作中如何做选择。

一. 后端模板渲染

后端模板渲染方式相对来说，历史悠久，就是由后端使用模板引擎（比如：用的比较多的php的 smarty ）将数据渲染成HTML返回给前端。前端再用JS去操作DOM或者渲染其他动态的部分。

下面，通过一张图来看整体开发思路。

整个过程，这里就不再细解释了，回头有空搞个视频实例教学来代码码一次，那样效果会更好。

这种页面渲染方式，前端HTML代码需要嵌入到后端代码中（如PHP）。所以，通常是前端源代码与后端源代码混合在一个工程里，前端负责写静态页面，布置UI，处理JS逻辑。后面负责将静态页面转换成模板页。

所以，不难看出，这种开发方式的缺点是：

1. 前后端混合在一起，不方便本地开发，本地模拟调试，更不方便自动化测试。

2. 前端被约束在后端开发的模式中，不能充分使用前端的构建生态，开发效率低下。

3. 项目更是难以管理和维护，也可能会有前后端职责不清的问题。

当然，这种渲染方式的最大好处是：前端能够快速呈现服务器端渲染好的页面，而不用等客户端渲染，这能够提供很好的用户体验与SEO友好。但是前后端分离开发之后，前端有了完美替换的开发方式（node中间层，SSR，后面会逐一说到）。

二. 客户端渲染

三. node中间层

四. 服务端渲染（SSR）

五. 如何根据实际情况选择使用哪种页面渲染？