前后端路由&前后端渲染

route & router

route：一条路由；由URL到函数的映射

/users          => getAllUsers()
/users/count    => getUsersCount()

router：一种机制；当接收到一个URL之后，去路由映射表查找相应的函数，这个过程由router来处理。

The router routes you to a route

服务端路由 + 服务端渲染

客户端发送HTTP请求，服务端根据请求的URL，找到相应的映射函数，然后执行函数，并将函数的返回值发送给客户端。对于静态资源服务器，所有URL的映射函数就是一个文件读取操作。对于动态资源服务器，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理等。

Express

app.get('/', (req, res) => {
    // 返回静态资源
    res.sendFile('index')
})
app.get('/users' (req, res) => {
    // 动态查找数据库内容并返回值
    db.queryAllUsers()
      .then(data => res.send(data))
})

前端路由 + 前端渲染

前端路由

页面跳转的URL规则匹配由前端来控制。

Hash模式：URL中 # 及其后面的内容为hash
```
const url = require('url')
var str = url.parse('localhost:8080/index#test')
console.log(str.hash)  // #test
```
hash仅仅是客户端的一个状态，当向服务端发请求的时候，hash部分并不会发过去。 window.onhashchange() 可以监听hash的变化
History模式：通过HTML5 History API可以在不刷新页面的情况下，直接改变当前URL。
```
window.history.pushState()
// 可以向浏览器地址栏push一个URL，而这个URL不会向后端发起请求
```
PS：页面里的跳转，通常是通过router的api去进行跳转的，router的api调用的通常是 history.pushState() 这个api，所以不会发起请求；

但是从浏览器地址栏输入一个地址，这个URL会向后端发起一个get请求就会返回404，所以需要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是app依赖的页面。

前端渲染

把渲染的任务交给了浏览器，通过客户端的算力来解决页面的构建，这很大程度上缓解了服务端的压力。而且配合前端路由，无缝的页面切换体验对用户友好。但是带来的坏处就是对SEO不友好！

前端路由+服务端渲染

前端框架的 服务端渲染 大多依然采用的是 前端路由 ，并且由于引入了状态统一、vnode等概念，它们的 服务端渲染 对服务器的性能要求比php等语言基于 字符串填充的模板引擎渲染 对于服务器的性能要求高得多。

预渲染：先在服务端构建出一部分静态的html文件，用于直出浏览器；然后剩下的页面再通过常用的前端渲染来实现。

参考文章：

yizihan / blog