前端必知——前端渲染/前端路由与后端渲染/后端路由

后端渲染：

网页发展初期，使用的都是后端渲染。由于以前开发是基于JSP(java server page)/PHP/C#等技术编写，我们访问一个网站，通过输入url网址，服务器获取到地址后，后台通过jsp技术，渲染页面，在jsp代码中包括：html+css+java代码，所以请求数据不是通过ajax请求，而是java后台直接请求，通过java来在后台直接动态渲染页面，传回服务器的只有：html+css代码，以及渲染好的页面，返回客户端直接加载页面，页面也就只包括：html+css代码。这就是：“后端渲染”

后端路由：

一个网站肯定不会只有一个页面，对于多个页面，肯定会存在路由跳转的问题，那么后端渲染的路由也在后端做了区分，服务器获取到地址后，传给后端的一个Controller进行处理，然后生成页面，传给服务器，服务器直接返回客户端进行渲染。

• 优点：
  后端路由对于不同路径的页面，交给服务器进行处理，服务器渲染好整个页面后客户端进行展示，这样的页面，不需要加载css和js，就可以浏览器直接展示，这样也有利于SEO的优化。

• 缺点：
  1.后端渲染只能后端人员编写代码。
  2.前端人员开发代码需要通过学习java或者php等后端语言来进行开发
  3.html等前端代码的逻辑与交互和后端逻辑代码混合编写，维护开发都很混乱。

前端渲染

随着发展，网页也发展到了前后端分离的开发模式，后端只需要提供接口（api）就可以了，前端负责页面和交互以及数据展示。这时也多了一个静态资源服务器。当输入网址url之后，浏览器先从静态资源服务器中获取：html+css+js代码。拿到之后：html+css可以直接渲染，js代码需要浏览器去执行js命令，然后 js 通过 Ajax 发送请求，获取 api 中的数据，然后服务器返回数据给 js，然后将数据插入到DOM中，然后在前端浏览器渲染页面。这就是：“前端渲染”

• 优点：
  1.前后端责任清晰，后端专注于数据，前端专注于交互和可视化。
  2.在移动端（ios/android）出现后，后端也不用修改，一套API即可满足需求。

SPA模式（single page application）

在SPA模式中，只存在一个单一页面，此时浏览器的渲染流程还是前端渲染的流程，但是静态服务器中获取的页面和样式还是脚本可能只有一套，这相对于 前后端分离 模式中一个 url 对应一套html+css+js 有很大的不同，但是如何达到点击浏览不同的页面，这里就需要一个叫：“前端路由” 的技术。

前端路由

当出现前端路由时，开发也就进入到一个 单页面复应用的阶段，即：SPA模式，也就是为前端页面加上了一层前端路由，也就是前端来统一维护路由规则。

此时前端根据SPA模式渲染的静态资源为全部的HTML+CSS+JS,因为此时只有一个单一页面，而且通过打包后，css和js也有可能是只有一个相对于的文件，所以静态服务器已经加载好了所有的资源。

而有了前端路由的功能，会自动配置映射关系，当触发事件时，会生成一个url在浏览器上显示，但是这个生成的Url不会向服务器请求资源，而是通过部分Js代码的判断来抽取出来资源中需要展示的部分页面。所以当有不同的url就会对应不同的页面资源来展示。