提问人：tomet 提问时间：6/1/2014 最后编辑：Communitytomet 更新时间：8/23/2018 访问量：27208
何时使用“客户端路由”或“服务器端路由”？
When to use "client-side routing" or "server-side routing"?
问：
我对此有点困惑，问这个问题我觉得有点愚蠢，但我想理解它。
所以，假设我正在使用客户端 Web 框架，比如 Backbone、Angular 或 Durandal。此框架包括路由。
但是我当然仍然有一个用于数据库的服务器，等等，它也有路由。
我现在的问题是：
何时使用“客户端路由”或“服务器端路由”？
如何“决定”路由是否已经在客户端执行，或者请求是否首先发送到 Web 服务器？
我特别难以想象这一点，因为客户端可以在服务器了解该请求之前进行路由。
如果有人能解释这两个路由系统如何协同工作，我将不胜感激。
P.S.：我没有包含代码示例，因为我不是在寻找关于特定框架的答案，而是关于一般的路由过程。
答：
4赞
Marian Klühspies
12/7/2014
#1
我认为客户端路由是由单页应用程序使用的，其中实际站点永远不会离开。
路由的工作原理是附加到当前页面，客户端路由框架在该页面上做出反应。
index.html#/mysubpage
服务器端路由类似于 apache 在通过其 url 调用子网站时默认执行的操作，但node.js使用路由来实现此操作，因为需要首先呈现 html 文件。
如果 SPA 具有客户端路由框架，并且使用的是 Node.js，则仍需要服务器端路由才能在站点之间切换
89赞
aedm
5/6/2016
#2
TL的;博士：
- 使用服务器端路由，每当您单击链接时，您都会下载一个全新的网页，
- 通过客户端路由，Web 应用程序可以为您下载、处理和显示新数据。
想象一下，用户点击一个简单的链接：<a href="/hello">Hello!</a>
在使用服务器端路由的 Web 应用上：
- 浏览器检测到用户已单击锚元素。
- 它向标记中找到的 URL 发出 HTTP GET 请求
href - 服务器处理请求，并发送一个新文档（通常是 HTML）作为响应。
- 浏览器将完全丢弃旧网页，并显示新下载的网页。
如果 Web 应用使用客户端路由：
- 浏览器检测到用户已单击锚元素，就像以前一样。
- 客户端代码（通常是路由库）捕获此事件，检测 URL 不是外部链接，然后阻止浏览器发出 HTTP GET 请求。
- 然后，路由库手动更改浏览器中显示的 URL（使用 HTML5 历史 API，或者在旧版浏览器上使用 URL 哈希bang）
- 然后，路由库会更改客户端应用的状态。例如，它可以根据路由规则更改根 React/Angular/etc 组件。
- 然后，应用（尤其是 MVC 库，如 React）会处理状态更改。它呈现新组件，并在必要时从服务器请求新数据。但这次响应不一定是整个网页，也可能是“原始”数据，在这种情况下，客户端代码会将其转换为 HTML 元素。
客户端路由听起来更复杂，因为它确实如此。但如今，有些图书馆确实让它变得容易。
客户端路由有几个好处：您可以下载更少的数据来显示新内容，您可以重用 DOM 元素，向用户显示加载通知等。然而，在服务器端生成 DOM 的 Web 应用程序更容易抓取（通过搜索引擎），从而使 SEO 优化更容易。将这两种方法结合起来也是可能的，出色的 Flow Router SSR 就是一个很好的例子。
评论
1赞
Victor
8/4/2016
我对客户端路由 Web 应用程序下载、处理和显示新数据感到好奇。如果我每个页面都有一个 200kb 的脚本（考虑到 120kb 是 React 本身），这是否意味着即使用户不会访问每个页面，客户端路由也会下载 1.5MB 的脚本？
1赞
aedm
8/4/2016
不。如果你有一个 200k 的客户端脚本，用于客户端路由，则适用于整个 Web 应用程序，通常包含每个页面的代码和完整的业务逻辑。你不需要将 React 单独嵌入到所有页面中。在整个应用中，每个 JS 库（通常）只有一个通用实例。
1赞
Victor
8/4/2016
你很清楚，在没有 React 组件的情况下编写 React 组件是行不通的，所以它必须导入到我编写的每个组件中。但是，在服务器端路由的情况下，200k 脚本只用于一页。import React from 'react'
1赞
aedm
8/4/2016
我不完全确定我是否理解你的问题。该指令不会在每个 React 组件中嵌入一个新的 React 实例。但是客户端代码包含所有页面的逻辑，即使是用户不访问的页面，如果这是你的问题。import
2赞
aedm
4/13/2017
如果手动输入 URL，则会向服务器发出请求。SPA 将照常下载，然后路由器库会根据 URL 初始化应用的状态。您无法捕获或覆盖它，因为它不是 DOM 事件。
3赞
AlexBottoni
8/23/2018
#3
现代应用程序通常以“混合”或“混合”方式同时使用客户端和服务器端路由，因此很难在这两种技术之间划清界限。
为了更好地理解何时以及如何使用服务器端路由和客户端路由，您可能必须弄清楚当您有一个用于管理大型制造公司的大型应用程序时会发生什么（这在现实世界中并不经常发生。这只是一个有用的例子）。
在这些情况下，您可能会有不同的人（具有不同的角色）看到这个复杂环境的不同部分（不同的方面或领域）。例如，工程师会看到一个包含大量数字文档的文件服务器，而在公司食堂工作的人员会看到要准备的菜单、工作时间表和商店。这些是完全不同的应用程序“域”，需要完全不同的 UI，因此为每种类型的用户提供不同的 SPA 是有意义的。
在这种情况下，可以使用服务器端路由向特定用户提供特定 UI （SPA），同时可以使用客户端路由在此 UI 内导航（并加载数据）。将这些 SPA 视为专门用于特定“任务”并由特定类型的“专业人员”使用的“仪表板”或“控制面板”。
例如，您可以为所有工程师设置一个 /myapp/engineering 路由，为所有食堂员工设置一个 /myapp/canteen。这些 URL 中的每一个都代表一个特定的域，并将为特定类型的用户提供特定的仪表板。这些 URL 将在服务器端进行托管。
Instead, you would use client-side routing to navigate inside each of these dashboard, loading data and re-configuring the UI as needed.
Of course, your app would probably also have a RESTful API used by your SPAs to fetch the data they need. The URLs belonging to the REST API must be managed server-side to perform their job (even if they are NOT associated to real HTML pages) and are invoked only by your SPAs "behind the scenes". They usually are kept in a separated "domain" like /myapp/api .
The same happens with static web page (like the "contacts" page and "about" page) that are usually kept in a /myapp/static folder (or "domain") and managed server-side (this folder or "domain" can be - and often is - hosted on a different server).
So, you should probably use server-side routing to separate applications domains from each other and client-side routing to navigate inside each domain.
评论