前端渲染和后端渲染、前端路由和后端路由

---

一、后端渲染

早期网页前后端不分离的时候，后端渲染比较多，当我们访问网站的时候，会在服务器把相应的数据都处理好直接返回的是一个渲染好的页面，前端仅仅负责展示。这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示。

后端渲染的优点是，有利于SEO优化。

缺点是代码结构比较复杂，开发和维护不方便。

• 一种情况是整个页面的模块由后端人员来编写和维护的
• 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码
• 通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情

二、前端渲染

随着AJAX的出现，前后端分离的模式开始实行。后端只需要提供相应的API，不负责任何内容，前端拿到数据后进行处理，最终渲染到网页上。

前端渲染的优点是，前后端的责任比较清晰，后端主要负责数据，前端主要负责交互和可视化，开发和维护比较方便。

前端渲染大量使用ajax，多数浏览器不能抓取ajax数据，SEO友好度较差。

三、后端路由

一个页面有自己对应的网址，也就是url，浏览器在地址栏中切换不同的 url 时，每次都向后台服务器发出请求，服务器响应请求，服务器渲染好整个页面, 并且将页面返回给客户端。

优点：分担了前端的压力，html和数据的拼接都是由服务器完成。

缺点：当项目十分庞大时，加大了服务器端的压力。HTML代码和数据以及对应的逻辑会混在一起, 不利于编写和维护。

四、前端路由

前端路由的核心是：改变URL，但是页面不进行整体的刷新。

• 随着Ajax的出现,，有了前后端分离的开发模式
• 后端只提供API来返回数据， 前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中
• 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上
• 并且当移动端(iOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可

单页面富应用（SPA）：最主要的特点就是在前后端分离的基础上加了一层前端路由。

五、资料

web单页应用

https://zhuanlan.zhihu.com/p/26366128