何时使用“客户端路由”或“服务器端路由”？

Question

我对此有些困惑，觉得自己有点傻，但我想理解它。

假设我正在使用客户端 Web 框架（如 Backbone、Angular 或 Durandal），该框架包括路由功能。

但是我当然仍然需要一个服务器来处理数据库等事务，而且这个服务器也具有路由功能。

我的问题是：

何时使用“客户端路由”或“服务器端路由”？

在客户端执行路由还是首先将请求发送到 Web 服务器上是如何“决定”的？

我很难想象这一点，因为客户端可以在服务器了解该请求之前就执行路由操作。

如果有人能解释一下这两个路由系统如何协同工作，我将不胜感激。

附言：我没有包含代码示例，因为我不是在寻找特定框架的答案，而是关于路由过程的一般性问题。

- tomet

---

你所说的服务器端路由具体是什么意思？是指访问由你的API定义的http端点，还是访问由你的数据库API定义的http端点？客户端路由涉及UI；服务器端路由通常涉及驱动UI的资源或被UI驱动的资源。你能否提供一个假设场景？ - user3174746

我第一次接触到这个项目是在查看以下链接时：https://github.com/mikefrey/noah-challenge.git。他使用Angular进行了一些路由，并使用Koa（类似于express的服务器端）进行了一些路由。 - tomet

我也有类似的理解问题。我正在尝试构建一个SPA，目前在后端使用sammy.js和php。现在我正在考虑从PHP切换到Node.js，而Express.js似乎可以在服务器端完成与Sammy.js完全相同的工作...令人困惑。 - Marian Klühspies

Answer 1

简述:

• 使用服务器端路由时，每次单击链接都会下载整个新的网页。
• 使用客户端路由，Web应用程序会下载、处理和显示新数据。

---

想象一下用户单击一个简单的链接：<a href="/hello">Hello!</a>

在使用服务器端路由的Web应用程序中：

• 浏览器检测到用户单击了锚元素。
• 它向href标记中找到的URL发送HTTP GET请求
• 服务器处理请求，并作为响应发送新文档（通常是HTML）。
• 浏览器完全丢弃旧的网页，并显示新下载的网页。

如果Web应用程序使用客户端路由：

• 浏览器像以前一样检测到用户单击了锚元素。
• 客户端代码（通常是路由库）捕获此事件，检测到URL不是外部链接，然后阻止浏览器发出HTTP GET请求。
• 路由库然后手动更改在浏览器中显示的URL（使用HTML5历史API，或者在较旧的浏览器上使用URL哈希符号）
• 路由库然后更改客户端应用程序的状态。例如，它可以根据路由规则更改根React/Angular等组件。
• 应用程序（特别是MVC库，如React）然后处理状态更改。它渲染新组件，并在必要时从服务器请求新数据。但是这次响应不一定是整个网页，它也可以是“原始”数据，在这种情况下，客户端代码将其转换为HTML元素。

客户端路由听起来更复杂，因为它确实更复杂。但是现在有些库真的很容易实现。

客户端路由有几个好处：下载的新内容数据更少，可以重用DOM元素，向用户显示加载通知等。但是，在服务器端生成DOM的Web应用程序更容易被搜索引擎爬取，从而使SEO优化更加容易。这两种方法也可以结合使用，出色的Flow Router SSR就是一个很好的例子。

- aedm

---

我对使用客户端路由，Web应用程序会为您下载、处理和显示新数据这一点很好奇。如果每个页面都有一个200kb的脚本（考虑到120kb是React本身），那么即使用户不访问每个页面，使用客户端路由是否意味着将下载一个1.5MB的脚本？ - Victor

不需要在每个页面单独嵌入React。如果使用客户端路由，你只需要一个200k的客户端脚本，通常包含每个页面的代码和完整的业务逻辑。整个应用程序中通常只有每个JS库的一个公共实例。 - aedm

你非常清楚地知道，如果不使用import React from 'react'编写React组件是行不通的，因此每个组件都必须导入它。但是在服务器端路由的情况下，200k的脚本仅用于一个页面。 - Victor

我不完全确定我理解你的问题。import指令不会在每个React组件中嵌入一个新的React实例。但是，如果你的问题是关于客户端代码包含所有页面的逻辑，即使用户没有访问这些页面，那么是的。 - aedm

如果您手动输入URL，则会向服务器发出请求。 SPA像往常一样被下载，然后路由器库根据URL初始化应用程序的状态。您无法捕获或覆盖此操作，因为它不是DOM事件。 - aedm

Answer 2

我认为客户端路由用于单页应用程序，该应用程序的实际站点永远不会离开。

路由通过附加到当前页面上工作，其中客户端路由框架作出反应。

index.html#/mysubpage

服务器端路由类似于调用子站点的默认方式（如Apache），但是Node.js通过使用路由进行操作，因为需要首先渲染HTML文件。

如果您拥有具有客户端路由框架的SPA并且正在使用Node.js，则仍然需要服务器端路由来在站点之间切换。

- Marian Klühspies

Answer 3

现代应用程序通常以“混合”或“混合”方式同时使用客户端路由和服务器端路由，因此很难在这两种技术之间划分界限。

为了更好地理解何时以及如何使用服务器端路由和客户端路由，您可能需要弄清楚当您有一个用于管理大型制造公司的大型应用程序时会发生什么（这在现实世界中并不经常发生。这只是一个有用的例子）。

在这些情况下，您可能会有不同的人（具有不同的角色），他们看到此复杂环境的不同部分（不同的方面或域）。例如，工程师将看到具有许多数字文档的文件服务器，而在公司食堂工作的人将看到要准备的菜单，工作时间表和商店。这些是完全不同的应用程序“领域”，需要完全不同的UI，因此为每种类型的用户提供不同的SPA是有意义的。

在这种情况下，您可以使用服务器端路由向特定用户提供特定的UI（SPA），而可以使用客户端路由来浏览此UI（并加载数据）。将这些SPAs视为专用于特定“任务”的“仪表板”或“控制面板”，由特定类型的“专业人员”使用。

例如，您可以为所有工程师设置/myapp/engineering路由，并为所有食堂工作人员设置/myapp/canteen。这些URL将代表特定的域，并为特定类型的用户提供特定的仪表板。这些URL将在服务器端进行管理。

相反，您将使用客户端路由在每个仪表板内进行导航，根据需要加载数据并重新配置UI。

当然，您的应用程序可能还具有RESTful API，用于获取它们所需的数据。 REST API属于服务器端管理，以执行其工作（即使它们未与实际的HTML页面相关联），仅由您的SPA“幕后”调用。它们通常被保留在一个分离的“域”中，例如/myapp/api。

静态网页（例如“联系人”页面和“关于”页面）也是如此，通常存储在/myapp/static文件夹（或“域”）中，并由服务器端管理（此文件夹或“域”可以 - 并且经常是 - 托管在不同的服务器上）。

因此，您应该使用服务器端路由来将应用程序域与其他域分开，并使用客户端路由在每个域内进行导航。

- AlexBottoni