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

Question

我对此有点困惑，我觉得这个问题有点愚蠢，但我想理解它。

因此，我说我正在使用客户端Web框架，如Backbone，Angular或Durandal。该框架包括路由。

但我当然还有一个服务器用于数据库的东西，依此类推，它也有路由。

我现在的问题是：

  

何时使用＆＃34;客户端路由＆＃34;或者＆＃34;服务器端路由＆＃34;？

     

如何＆＃34;决定＆＃34;路由是否已在客户端执行或请求是否首先发送到Web服务器？

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

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

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

Answer 1

TL; DR：

• 使用服务器端路由，只要您点击链接，就可以下载整个新网页
• 通过客户端路由，webapp会为您下载，处理和显示新数据。

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

在使用服务器端路由：

的网络应用中

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

如果网络应用使用客户端路由：

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

客户端路由声音更复杂，因为它是。但是现在有些图书馆真的很容易。

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

Answer 2

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

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

  

的index.html＃/ mysubpage

服务器端路由类似于apache在通过url调用子网站时默认执行的操作，但node.js通过使用路由来执行此操作，因为需要首先呈现html文件。

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

Answer 3

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

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

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

在这种情况下，您可以使用服务器端路由为特定用户服务一个特定的UI（SPA），而您可以使用客户端路由来导航在该用户界面中（并加载数据）。将这些SPA视为专门用于特定“任务”并由特定类型的“专业人员”使用的“仪表盘”或“控制面板”。

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

相反，您将使用客户端路由来在每个 dashboard 中的 navigate 中进行导航，加载数据并将UI重新配置为需要。

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

静态网页（例如“联系人”页面和“关于”页面）通常也会保存在/ myapp / static文件夹（或“域”）和托管服务器端（此文件夹或“域”可以（而且通常是）托管在其他服务器上。

因此，您可能应该使用服务器端路由将应用程序域彼此相互分离，并在每个域内部的导航中进行客户端路由。