web-applications - 何时使用 "client-side routing"或 "server-side routing"?

标签 web-applications routes client-side server-side

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

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

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

我现在的问题是:

When to use "client-side routing" or "server-side routing"?

How is it "decided" whether routing is already performed on the client side or whether the request is first sent to the web server?

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

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

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

最佳答案

tl;博士:

  • 通过服务器端路由,每当您点击链接时,您都会下载一个全新的网页,
  • 通过客户端路由,网络应用会为您下载、处理和显示新数据。
<小时/>

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

在使用服务器端路由的网络应用程序上:

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

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

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

客户端路由听起来更复杂,因为它确实如此。但现在有些库确实让这一切变得简单。

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

关于web-applications - 何时使用 "client-side routing"或 "server-side routing"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23975199/

相关文章:

PHP:如何对数组的数组执行 htmlspecialchar()?

javascript - Ember 嵌套路由和渲染模型

javascript - 如何在fastify中的基本路由内分配路由

javascript - 客户端和服务器端编程有什么区别?

javascript - 带对话框的 FileSaver.js

java - Hulu.com 如何跟踪您在电视节目中的位置?

html - 如何自定义 bootstrap sidebar/sidenav?

regex - ASP.NET MVC 正则表达式路由约束

javascript - 从 PHP 渲染 React 组件

php - 网站到 POS 打印机