之前学习前端框架的时候，发现框架都会自带路由插件(React-Router等)，与已知的后端路由进行联系。那客户端路由与服务端的路由的关系是？为什么要前端路由，一般不都是服务器向客户端的请求发送资源吗？

所以就有这篇科普文章的存在了；虽然下笔的时候觉得文笔太烂，不忍贴出太多的文字，最好是能贴上几百行代码，文章篇幅就够了。貌似和写毕业论文的时候烂贴图片有点像。。。

好了，经过总结和翻译后的正餐送上：

web路由就是针对同一主机(ip)中不同路径的请求显示不同页面的机制。

服务端路由 Server-side Routing

<a href="/hello">Hello!</a>

每当我们点击网页中的链接时，常常发生的是浏览器新开一个标签，标题栏进度在转，大概稍等几秒(时间取决于网页大小、网络状况、浏览器渲染速度等)后，页面进入完备状态。
那么进度条在转的过程基本就是

  • 浏览器(客户端)向当前url路径下的子路径 /hello 发送get请求(ContentType一般为text/html)
  • 服务端解析请求并进行路由，向浏览器发送html
  • 浏览器解析DOM/CSS/JS并进行渲染。

也就是说每次我们在网站上瞎点的时候都是在进行一个完整的网页加载过程，想想同一个站点这些页面是不是有很多类似的DOM结构，导航栏啦、脚注啦、甚至广告位啦等等。

本质上这些类似资源的请求就造成了网络资源的浪费和拥塞。

Pros

  • 请求什么发送什么，精准应对请求
  • 技术成熟，SEO友好

Cons

  • 每个请求都是完整的页面刷新，资源浪费
  • 刷新时间长

客户端路由 Client-side Routing

那么如果点击链接时不需要服务端发送完整的页面，甚至完全不需要向服务端进行请求呢。
这就是所谓的单页面应用(Single Page Application)了。
SPA中点击链接加载的完整过程是：

  • 在首屏加载时需要对应用需要的资源进行完整请求
  • 点击链接时检测请求事件，阻止浏览器发送get请求
  • 客户端路由代码改变地址栏url（利用HTML5 history API等）
  • 如果需要从服务端接收数据，发送Ajax请求获取需要的数据即可(json等)
  • 路由代码对页面需要改变的DOM结构进行加载和渲染

Pros

  • 请求数据少，页面加载快
  • 平滑动画加载更容易实现

Cons

  • 首屏加载需求资源多，首屏加载慢
  • 如果用户不浏览页面内部链接，首屏加载的内容容易浪费
  • 技术较新，实现更复杂
  • SEO目前不如服务端

参考网页：

[1] when-to-use-client-side-routing-or-server-side-routing
[2] server-side-vs-client-side-routing