什么是前端渲染和后端渲染，前端路由和后端路由。

—文章首发—

什么是前端渲染和后端渲染，前端路由和后端路由。

视频讲解

后端渲染：

服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。比如：jsp页面

好处：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板）

坏处：占用服务器资源。

前端渲染

浏览器中显示的网页中的大部分内容，都是由前端写的 js 代码在浏览器中执行，最终渲染出来的网页。

也可以怎么说：后端返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，拼接字符串，并插入页面。

好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。

坏处：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。

前端渲染与后端渲染对比：

后端渲染：

页面呈现速度：快，受限于用户的带宽

流量消耗：少一点点（可以省去前端框架部分的代码）

可维护性：差（前后端东西放一起，掐架多年，早就在闹分手啦）

seo友好度：好

编码效率：低（这个跟不同的团队不同，可能不对）

前端渲染：

页面呈现速度：主要受限于带宽和客户端机器的好坏，优化的好，可以逐步动态展开内容，感觉上会更快一点。

流量消耗：多一点点（一个前端框架大概50KB）当然，有的用后端渲染的项目前端部分也有在用框架。

可维护性：好，前后端分离，各施其职，代码一目明了。

SEO友好度：差，大量使用ajax，多数浏览器不能抓取ajax数据。

编码效率：高，前后端各自只做自己擅长的东西，后端最后只输出接口，不用管页面呈现，只要前后端人员能力不错，效率不会低。

什么是路由

路由是根据不同的 url 地址展示不同的内容或页面。

前端路由

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

很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转到不同的URL都是使用前端的锚点路由. 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。

优点：

1.用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户

2.可以再浏览器中输入指定想要访问的url路径地址。

3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

后端路由

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

这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

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

缺点：当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。HTML代码和数据以及对应的逻辑会混在一起, 不利于编写和维护。

---

图解

前端路由阶段：

前后端分离阶段

SPA（单页面富应用）页面的阶段。

参考链接：

https://www.cnblogs.com/wuyunna/p/11496430.html
https://www.cnblogs.com/wwwxxjsyy/p/11008443.html