什么是前端渲染和后端渲染

后端渲染

谈到后端渲染，必然会说到网站开发的三个著名阶段。包括

• 后端路由阶段
• 前后端分离阶段
• 单页面富应用阶段

后端路由阶段

在早期的网站开发中，整个html页面都是服务器来渲染的，服务器直接生产渲染好对应的html页面，返回给客户端进行展示。在这个过程中存在一些问题，一个网站，很多的页面，服务器是怎么处理的呢？

• 首先，一个页面有自己对应的网站，也就是一个URL
• URL会发送到服务器，服务器通过正则进行匹配，并且最后交给一个controller进行处理
• controller进行各种处理后，将最终生成的HTML或者数据返回给前端
• 以上成为一个完整的IO操作

后端路由

• 当我们页面中需要请求不同路径(即不同URL)内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端
• 这种情况下渲染好的页面不需要单独加载任何js和css，可以直接交给浏览器展示，这样的方式有利于SEO优化

后端渲染示意图

后端路由的缺点

• 整个页面的模块由后端人员来编写和维护
• 前端人员要进行后端开发需要通过PHP和JAVA等来编写代码
• 通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护都相当头痛

于是随时时间的推移，产生了前后端分离阶段

前后端分离阶段

• 随着AJAX的出现，有了前后端分离的开发模式
• 在这个模式下，后端只提供API来返回数据，前端通过AJAX来获取数据，并且可以通过JS将数据渲染到页面中
• 前后端责任清晰，后端专注于数据处理，前端专注于交互和可视化
• 移动端等其他端应用可以沿用之前的API
• 是目前网站开发的主流

前后端分离阶段示意图
静态资源服务器是用来存储HTML+CSS+JS 的，在URL发起请求后，随机返回这一套，然后在浏览器中对HCJ进行解析，js中再向服务器单独发出数据的请求。

单页面富应用阶段

• SPA(simple page application) 最主要的特点是在前后端分离的基础上增加了一层前端路由
• 由前端来维护一套路由规则

前端路由的何欣

• 改变URL，但页面不进行整体刷新