前端渲染和后端渲染

了解什么是前端渲染什么是后端渲染，这要从网页的发展历史开始说起

第一个阶段：后端渲染

以前网页开发都是通过类似于jsp的这种东西，我们将https://taobao.com这个url发送到服务器中，早期的时候，第一步它做了一个解析，解析看你到底要请求什么样的一个网页，它发现你要请求的是 淘宝的首页，它就会在它的后台通过一个叫做jsp的技术直接将网页写好，这个网页包含了很多东西html+css+java，java代码的作用是是从数据库中读取数据，并且将它动态的放到页面中。也就是说它最终的样子就已经在服务器里面了，意味着首页里面的东西不再经过Ajax请求（以前的网页没有Ajax请求），然后将最终的页面直接传给浏览器，传给页面里的东西也只有css+html。这个就叫做后端渲染，因为它整个网页页面渲染出来的并不是在前端渲染出来的，而是通过后端通过一些特殊的技术，类似于jsp/php直接渲染好了，给到你的时候就是已经渲染好的页面了，而且我们是在服务器中渲染的，也叫做服务端渲染，也叫后端渲染。
当我们再次输入一个url:https://taobao.com/markets/nanzhuang，发给服务器，服务器拿到这个url会对其进行解析，服务器中就会对应的利用jsp技术渲染出最终的一个html+css+java的一个页面，再将这个最终的网页传到前端，前端直接展示最终的网页。
此时在服务器中已经形成了一个映射关系，而这种映射关系是谁在帮我们存储呢，是服务器在处理。
后端路由：就是后端处理URL和页面之间的映射关系。它其实就是在看我们的映射关系是谁在帮我们处理，而我们这里很明显就是后端帮我们保存，所以这种路由我们称之为后端路由
总：我们页面最终是在后端渲染完并且直接给我们前端的，这种我们称之为后端渲染，如果我们之间的映射关系也是有后端进行处理的，那我们这种路由关系也叫后端路由。

后端路由阶段

■早期的网站开发整个HTML页面是由服务器来渲染的.

• 服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示.

■但是,一个网站,这么多页面服务器如何处理呢?

• 一个页面有自己对应的网址，也就是URL.
• URL会发送到服务器,服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理.
• Controller进行各种处理,最终生成HTML或者数据,返回给前端.
• 这就完成了一个IO操作.

■上面的这种操作,就是后端路由.

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

■后端路由的缺点

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

第二个阶段：前后端分离

前后端分离，后端只负责提供数据，不负责任何阶段的内容。
很多公司会将静态资源服务器和接口合并在一起，但是也有不合一起的。我们这里就讲分开的。
当我们拿到一个url:jd.com，那它必然去服务器中拿一些东西，那它去哪拿呢？静态资源服务器，因为你写的所有代码都是放在静态资源服务器中，它会拿到三个东西html+css+js，此时这三个都在浏览器中，而html+css浏览器可以直接渲染，但js代码必须由浏览器执行，比如说$ajax(url:api接口：success:function)这个js代码，这个代码也是在浏览器中执行。当前浏览器会在向另一个服务器请求与api相关的资源，那提供API接口的服务器会将对应的数据返回到浏览器中，此时我们的浏览器中就拿到了大量的数据，比如list:[]，再通过其他的js代码创建我们比如div标签类似的元素，并且将我们大量的数据插入到这些标签里面，最终我们浏览器再将js相关的东西渲染到我们整个页面里面。我们的这些数据不是在服务器中渲染好的，而是通过ajax请求，从API接口中获取的数据，渲染到我们的浏览器中。
前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。
在这里其实就没有前端路由后端路由的概念。

■前后端分离阶段:

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

第三个阶段：单页面富应用阶段

SPA页面（Simple Page web Application）整个页面只有一个html页面。现在我们有一个API服务器，后面链接的是数据库，还有一个静态资源服务器。与前后端分离不同的是，前后端分离的静态资源服务器中放了好几套url，但是在单页面富应用中只有一个index.html+css+js。假如此时我再浏览器中输入一个url:coderwhy.com，它就会去我们的静态资源服务器中将唯一的一套html+css+js请求到我们的服务器中（此时已经将全部资源请求下来了）。再假设我们的网站中有几个按钮，“首页”，“关于”，“我的”，当我点击首页时，下面就显示与首页相关的数据。虽然我们已经将全部的资源请求下来了，但是并不是一开始这些东西都会执行的。此时，希望点击首页按钮，将请求来的数据中有关首页的东西抽离出来，显示在首页里面，同理，点击关于和我的也是同样的需求。那这个时候我们就将其分成三个页面，那它怎么分成3个呢，它必须有个技术做支撑，这个技术就是前端路由
当我们将所有的资源都下下来以后，由前端路由做支撑，前端路由中会配置很多映射关系，就是当我点击首页按钮的时候就会生成一个url，比如说是coderwhy.com/home，也就是点击首页，浏览器就会显示coderwhy.com/home这个url，这个url不会再向服务器请求资源，它只会通过一些js代码的判断，在全部资源里面抽取要显示首页相关的东西。再有一个url:coderwhy/about，它就会再从前我们的全部资源里面抽取一部分资源（这个资源再vue里面来讲就是一个个的组件），也就是所有的页面都打包到一个js里面

当它在前端自动监听浏览器，一旦发现浏览器上面的url是上图所写的那样，就会从我们的js里面 找到属于我们那个url对应的组件相关的东西，在我们的界面上进行渲染。也就是说我们的jsp页面必须要有前端路由做支撑，前端路由就是用于映射我们浏览器上面url和我们上面全部资源到底要渲染哪个组件的。也就是一个url对应一个页面，而这种映射关系就是通过前端路由进行管理

■单页面富应用阶段:

• 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
• 也就是前端来维护一套路由规则.

■前端路由的核心是什么呢?

• 改变URL ,但是页面不进行整体的刷新。
• 如何实现呢?