从Vue Router来看客户端与服务端路由

前言

当我们创建一个Vue项目的时候，如果我们选上了Router选项，则会在项目那里生成一个router文件夹，并在该文件夹里有着index.js代码，这时候我们可以看看这个代码并且查看它的用途：

接下来，我们就来分析一下这个我们开发Vue项目几乎必备的库的原理吧

客户端路由与服务端路由

Vue Router是一种客户端路由实现，这里我们要先理解什么是客户端路由

客户端路由有着以下特点：

数据和页面的加载均在浏览器中进行

用户在点击浏览器进行页面切换的时候，不需要向服务器发送请求，仅仅需要改变浏览器的URL，客户端再根据URL加载相对应的组件与数据，这一点也是客户端路由与客户端路由的核心区别，当我们第一次输入URL请求的时候，页面不仅仅会返回所请求的页面，还会返回其余剩下的部分，这时候的浏览器就已经有了之后URL发生变更时需要请求的所有代码，当这时我们再一次发送请求的时候，无需重新加载页面，这便是单页面应用，因为返回的其实只是一个index.html

由于为单页面应用，也就让客户端路由有着相较服务端路由更强的性能体验————SPA页面渲染和数据加载均在客户端进行，这大大降低了服务器的压力，也就能够更好的提供网站的性能与响应能力

在上面我反复的将客户端路由与服务端路由进行对比，接下来就让我们看看服务端路由的特点吧：

数据和页面都在浏览器中处理和渲染

当用户在进行页面的切换时，都会向服务器发送一个新的请求，服务器根据请求返回相对应的页面和数据，相较于SPA的组件化页面来讲，服务端路由更加强调一个页面的完整性，保证了搜索引擎爬虫可以访问到每个页面的内容，对于需要SEO优化的网站，如掘金来说非常的重要

服务端路由每一次的请求都会经过服务器处理，相较于浏览器本地渲染来说更能保证数据的安全性

这么一看下来，也就可以让我们去分析它们的缺点了：

对于客户端路由来说：

虽然页面的切换方便了，但由于组件化页面的方式导致了自己进行SEO优化很不方便，客户端路由中页面切换只会改变URL的hash值，不会发送新的请求，也就不利于搜索引擎进行爬虫了，这也是nuxt.js诞生的必要性之一了，掘金也便是使用nuxt.js来进行SEO优化的吧

当我们进行请求的时候，不仅仅会获取当前这个页面的数据，还会去获取其他的内容，这也就导致了首屏渲染速度较慢

当我们在选购一些商品的时候，客户端路由会记录下我们的选项，修改URL，当我们将这个URL分享给其他用户时，不会像服务端路由一样直接是全新的，而是会记下我们当时的一个选项

对于服务端路由来说：

当我们需要切换页面的时候，便会向服务器发送请求，这也就导致了页面切换速度较慢，大大降低了用户的体验

由于我们需要服务器来处理页面渲染与数据加载，这也就将所有的压力带到了服务器这里，便导致了对于服务器的性能要求较高

服务端端路由和服务端渲染？

这里多提一嘴，千万不要将客户端路由、服务端路由与客户端渲染(CSR)和服务端渲染(SSR)搞混了！

服务端路由是指在服务器端根据请求的 URL 地址匹配相应的处理函数来处理请求，这种方式会在服务器端渲染HTML页面，但是生成的页面仍然需要通过浏览器的JavaScript解析器来执行一些前端的逻辑，所以它(服务端路由)仍然是一种客户端渲染方式。而SSR则是在服务端完成了HTML页面的渲染，可以避免客户端执行大量的JavaScript代码，从而提高页面的加载速度和用户体验，这也是SSR能够提高首屏渲染的原因

总结

总体来说，客户端路由和服务端路由各有优缺点。客户端路由适用于需要提供优秀交互体验，但首屏渲染较慢、不利于SEO优化，需要在浏览器中进行数据请求，对服务器的性能要求相对较低。而服务端路由适用于需要提供更好的SEO优化、快速首屏渲染的网站，但需要向服务器发送新的请求，对服务器的性能要求较高。因此，在实际应用中，我们应该根据具体需求来选择使用哪种路由方案。

无论是客户端路由还是服务端路由，都有一定的应用场景和适用范围。对于需要提供优秀用户体验和动态交互的 Web 应用，客户端路由更为适用；而对于需要提供更好的SEO优化和网站性能的网站，服务端路由更为适用。但之后的出现了nuxt.js和next.js，很大程度上弥补了传统的客户端路由不利于SEO优化的问题，这也是尤大在很多的演讲中都会提到Vue3对SSR(服务端渲染)的优化的原因之一

最终选择哪种路由方案，还要需要结合具体的项目来分析。