コンテンツにスキップ
Remix Logo Remix Logo Remix ドキュメント

网络并发管理

このコンテンツはまだ日本語訳がありません。

在构建 Web 应用程序时，管理网络请求可能是一项艰巨的任务。确保数据最新和处理同时发生的请求的挑战通常会导致应用程序中的复杂逻辑来处理中断和竞争条件。Remix 通过自动化网络管理、镜像和扩展 Web 浏览器的直观行为来简化此过程。

为了帮助理解 Remix 的工作原理，请记住 Fullstack Data Flow 中的内容，在 表单 提交后，Remix 将从加载器中获取新数据。这称为重新验证。

与浏览器行为自然一致

Remix 对网络并发的处理很大程度上受到 Web 浏览器处理文档时的默认行为的启发：

  • 浏览器链接导航：当您在浏览器中单击一个链接，然后在页面转换完成之前单击另一个链接时，浏览器会优先处理最近的 操作。它会取消初始请求，仅关注最近单击的链接。

  • Remix 的方法：Remix 以相同的方式管理客户端导航。当在 Remix 应用程序中单击链接时，它会为与目标 URL 绑定的每个加载器启动获取请求。如果另一个导航中断了初始导航，Remix 会取消之前的获取请求，确保只有最新的请求才能继续。

  • 浏览器表单提交：如果您在浏览器中发起表单提交，然后快速再次提交另一个表单，则浏览器将忽略第一次提交，仅处理最新的提交。

  • Remix 的方法：Remix 在处理表单时模仿了这种行为。如果提交了一个表单，并且在第一个表单完成之前发生了另一个提交，则 Remix 会取消原始的获取请求。然后它会等待最新的提交完成，然后再触发页面重新验证。

同时提交和重新验证

虽然标准浏览器每次只能发送一个导航和表单提交请求，但 Remix 提升了这一行为。与导航不同，使用 useFetcher 可以同时发送多个请求。

Remix 旨在高效处理对服务器 操作 的多个表单提交和并发重新验证请求。它确保一旦有新数据可用，状态就会立即更新。然而，当其他 操作 引入竞争条件时，Remix 还可以避免提交过时的数据，从而防止潜在的陷阱。

例如，如果正在进行三项表单提交，其中一项已完成，Remix 会立即使用该数据更新 UI，而无需等待其他两项提交，以便 UI 保持响应迅速且动态。当其余提交完成后，Remix 会继续更新 UI，确保显示最新数据。

为了帮助理解一些可视化效果，下面是图表中使用的符号的说明：

  • |：提交开始
  • ✓：操作完成，数据重新验证开始
  • ✅：重新验证的数据已提交给 UI
  • ❌：请求已取消
submission 1: |----✓-----✅
submission 2:    |-----✓-----✅
submission 3:             |-----✓-----✅

但是，如果后续提交的重新验证在先前的提交之前完成，Remix 会丢弃早期的数据，确保只有最新的信息反映在 UI 中。

submission 1: |----✓---------❌
submission 2:    |-----✓-----✅
submission 3:             |-----✓-----✅

由于提交 (2) 的重新验证开始得晚于提交 (1)，并且到达得早于提交 (1)，因此提交 (1) 的请求被取消，只有提交 (2) 的数据被提交到 UI。该请求较晚，因此更有可能包含来自 (1) 和 (2) 的更新值。

数据过时的可能性

您的用户不太可能会遇到这种情况，但在基础设施不一致的情况下，用户在极少数情况下仍有可能看到过时的数据。即使 Remix 取消了对过时数据的请求，它们最终仍会到达服务器。在浏览器中取消请求只会释放该请求的浏览器资源，它无法 赶上 并阻止它到达服务器。在极少数情况下，取消的请求可能会在中断 操作 的重新验证后更改数据。请考虑此图：

     👇 interruption with new submission
|----❌----------------------✓
       |-------✓-----✅
                             👆
                  initial request reaches the server
                  after the interrupting submission
                  has completed revalidation

用户现在看到的数据与服务器上的数据不同。请注意，这个问题非常罕见，并且也存在于默认浏览器行为中。初始请求到达服务器的时间晚于第二个请求的提交和重新验证，这种可能性在任何网络和服务器基础架构上都是意料之外的。如果您的基础架构存在此问题，您可以在表单提交时发送时间戳，并编写服务器逻辑以忽略过时的提交。

例子

在组合框等 UI 组件中，每次按键都可能触发网络请求。管理如此快速、连续的请求可能很棘手，尤其是在确保显示的结果与最新查询相匹配时。但是，使用 Remix，可以自动处理这一挑战，确保用户看到正确的结果，而无需开发人员对网络进行微观管理。

app/routes/city-search.tsx
import type { LoaderFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
import { json } from "@remix-run/node"; // or cloudflare/deno


export async function loader({
  request,
}: LoaderFunctionArgs) {
  const { searchParams } = new URL(request.url);
  const cities = await searchCities(searchParams.get("q"));
  return json(cities);
}


export function CitySearchCombobox() {
  const fetcher = useFetcher<typeof loader>();


  return (
    <fetcher.Form action="/city-search">
      <Combobox aria-label="Cities">
        <ComboboxInput
          name="q"
          onChange={(event) =>
            // submit the form onChange to get the list of cities
            fetcher.submit(event.target.form)
          }
        />


        {/* render with the loader's data */}
        {fetcher.data ? (
          <ComboboxPopover className="shadow-popup">
            {fetcher.data.length > 0 ? (
              <ComboboxList>
                {fetcher.data.map((city) => (
                  <ComboboxOption
                    key={city.id}
                    value={city.name}
                  />
                ))}
              </ComboboxList>
            ) : (
              <span>No results found</span>
            )}
          </ComboboxPopover>
        ) : null}
      </Combobox>
    </fetcher.Form>
  );
}

应用程序需要知道如何查询数据以及如何呈现数据，Remix 负责处理网络。

结论

Remix 为开发人员提供了一种基于浏览器的直观方法来管理网络请求。通过镜像浏览器行为并在需要时对其进行增强，它简化了并发、重新验证和潜在竞争条件的复杂性。无论您是构建简单的网页还是复杂的 Web 应用程序，Remix 都能确保您的用户交互顺畅、可靠且始终保持最新状态。