服务端路由 VS 客户端路由

vite-plugin-ssr 对服务端路由和客户端路由都有一流的支持

服务端路由

服务（端）路由是一种路由界的“old school”：当用户导航到新页面时，旧页面将被完全丢弃并加载新页面的 HTML

服务端路由通常采用更简单的应用程序架构，从而提高开发速度

客户端路由

默认情况下，vite-plugin-ssr 执行服务端路由。我们可以通过把 clientRouting option 选项设置为 true 来开启客户端路由

客户(端)路由 在客户端实现页面导航： 当用户导航到新页面时， 保留当前页面，通过操作页面的 DOM 渲染新页面，而不是丢弃当前页面并请求新页面的 HTML

客户端路由启用后：

• 更快的页面导航
• 跨页面保留客户端状态
• 嵌套布局
• 自定义页面过渡动画

我们在下面进一步讨论使用场景

如何选择？

默认情况下，我们推荐服务器路由，因为它使得应用程序架构更简单

虽然 Next.js 和 Nuxt 等框架让客户端路由最开始看起来很简单， 但它总是伴随着固有的复杂性，这使得开发 Next.js / Nuxt 应用变得复杂且扩展速度慢

一般来说，需要考虑两件事：

• 简单和性能之间的权衡
• 如果我们需要在导航中保留客户端状态（例如音乐播放器和嵌套布局），只能选择客户端路由

换言之，使用哪种路由方式，取决于用例场景

简单网页

架构简单的应用程序，例如作品集、营销网站，可以接受客户端路由带来的复杂性。 客户端路由是值得的，因为它具有流畅的页面导航，为此类网站提供了舒适的触感

MVPs

作为一家希望尽快交付的 MVP 初创公司，服务器路由是一个明智的选择。 简单的应用程序架构可以提高开发速度，从而为我们的用户带来更多功能

推荐：服务端路由

高度完善的应用

例如 Netflix 的 web 应用：Netflix 致力于提供令人愉悦的用户体验，并且有足够的预算和人力来做这件事。 对于娱乐应用程序，高度完善的用户体验值得增加复杂性

推荐：客户端路由

跨导航保留客户端状态

例如，在 Spotify 等音乐播放器上，当前正在收听的歌曲不应在用户导航到新页面时中断。服务器路由无法保留客户端状态；我们需要客户端路由

必须：客户端路由

嵌套布局

与之前章节类似，当使用 Nested Layouts 时，外层页面的状态被保留，这意味着我们不能使用服务端路由实现嵌套路由

必须：客户端路由

第三方 API

例如，如果我们使用 Shopify 或 Facebook 的 GraphQL API， 客户端路由页面导航不向我们的 Node.js 服务器发出任何请求： 当用户导航到新页面时， 用户的浏览器直接与 Shopify/Facebook GraphQL API 通信，而我们的 Node.js 服务器不参与

Shopify/Facebook GraphQL API 在地理上可能比我们的 Node.js 服务器离我们的用户更近；我们可能希望减少我们的 Node.js 服务器的参与

推荐：客户端路由