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

【问题标题】：When to use "client-side routing" or "server-side routing"?何时使用“客户端路由”或“服务器端路由”？
【发布时间】：2014-07-21 10:18:43
【问题描述】：

对此我有点迷茫，问这个问题我觉得有点愚蠢，但我想了解它。

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

但我当然还有一个用于数据库内容的服务器，等等，它也有路由。

我现在的问题是：

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

如何“决定”是否已经在客户端执行了路由，或者请求是否首先发送到 Web 服务器？

我很难想象这一点，因为客户端可以在服务器知道该请求之前进行路由。

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

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

【问题讨论】：

服务器端路由到底是什么意思？您的意思是访问由 your API 定义的 http 端点，还是由您的数据库 API 定义的 http 端点？客户端的路由涉及到 UI；服务器端的路由通常涉及驱动 UI 或由 UI 驱动的资源。你能提供一个假设的场景吗？
我在看这个项目时第一次遇到这个：github.com/mikefrey/noah-challenge.git。他使用 Angular 进行一些路由，并使用 Koa（服务器端，如 express）进行一些路由。
我也有类似的理解问题。我正在尝试构建一个 SPA，我目前在后端使用 sammy.js 和 php。现在我正在考虑从 PHP 切换到 Node.js，还有 Express.js，它似乎与 Sammy.js 完全一样，但在服务器端......令人困惑

标签： web-applications routing client-side server-side

【解决方案1】：

tl;博士：

通过服务器端路由，您可以在每次点击链接时下载整个新网页，
通过客户端路由，Web 应用会为您下载、处理和显示新数据。

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

在使用服务器端路由的网络应用上：

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

如果 webapp 使用客户端路由：

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

客户端路由听起来更复杂，因为它是。但是现在有些图书馆确实让这变得容易了。

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

【讨论】：

我对 webapp 下载、处理和显示新数据的客户端路由感到好奇。如果我每个页面都有一个 200kb 的脚本（考虑到 120kb 是 React 本身），这是否意味着即使用户不会访问每个页面，拥有客户端路由也会下载 1.5MB 的脚本？
没有。如果你有一个 200k 的客户端脚本用于客户端路由，那是针对整个 webapp，通常包含每个页面的代码和完整的业务逻辑。你不需要在所有页面中单独嵌入 React。整个应用程序中每个 JS 库（通常）只有一个公共实例。
你很清楚，写一个没有import React from 'react'的React组件是行不通的，所以我写的每一个组件都必须导入它。但是在服务器端路由的情况下，200k 脚本是针对一页的。
我不完全确定我理解您的问题。 import 指令不会在每个 React 组件中嵌入一个新的 React 实例。但客户端代码包含所有页面的逻辑，即使是用户未访问的页面，如果这是您的问题。
如果您手动输入 URL，则会向服务器发出请求。 SPA 像往常一样下载，然后路由器库根据 URL 初始化您的应用程序的状态。您无法捕获或覆盖它，因为它不是 DOM 事件。

【解决方案2】：

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

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

index.html#/mysubpage

服务器端路由类似于 apache 默认通过其 url 调用子站点时所做的，但 node.js 通过使用路由来做到这一点，因为需要首先呈现 html 文件。

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

【讨论】：

【解决方案3】：

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

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

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

在这种情况下，您可以使用服务器端路由为特定用户提供特定 UI (SPA)，同时您可以使用客户端路由导航在这个 UI 中（并加载数据）。将这些 SPA 视为专用于特定“任务”并由特定类型的“专业人士”使用的“仪表板”或“控制面板”。

例如，您可以为所有工程师设置一条 /myapp/engineering 路线，为所有食堂员工设置一条 /myapp/canteen 路线。这些 URL 中的每一个都将代表一个特定的域，并将为特定类型的用户提供一个特定的dashboard。这些 URL 将在服务器端进行管理。

相反，您将使用 client-side 路由在每个 dashboard 中导航，加载数据并将 UI 重新配置为需要。

当然，您的应用可能还会有一个 RESTful API，供您的 SPA 用来获取他们需要的数据。属于 REST API 的 URL 必须在服务器端进行管理才能执行它们的工作（即使它们与真正的 HTML 页面没有关联），并且只能由“幕后”的 SPA 调用。它们通常保存在一个单独的“域”中，例如 /myapp/api 。

通常保存在 /myapp/static 文件夹（或“域”）和托管服务器端（此文件夹或“域”可以 - 并且经常 - 托管在不同的服务器上）。

因此，您可能应该使用服务器端路由来分隔应用程序域，并使用客户端路由来导航每个域内。

【讨论】：