Remix中如何避免嵌套路由与父布局重复获取相同数据？

针对你遇到的父路由（sales.jsx）和子路由（sales/info.jsx）重复请求相同数据的问题，Remix有几种直接的解决方案，按推荐优先级排序：

1. 将共享数据的Loader提升到父路由 #

这是最符合Remix路由设计理念的方案——利用父子路由的层级关系，把需要共享的数据逻辑只放在父路由的Loader中，子路由直接复用父路由的数据，完全避免重复请求。

实现步骤： #

• 保留sales.jsx中的Loader，删除sales/info.jsx中的重复Loader
• 在sales/info.jsx中通过useMatches钩子获取父路由的数据：

import { useMatches } from "@remix-run/react";

export default function SalesInfo() {
  // 获取所有匹配的路由信息
  const matches = useMatches();
  // 找到父路由（/sales）的匹配项
  const parentRouteData = matches.find(match => match.id === "routes/sales")?.data;
  
  if (!parentRouteData) {
    // 处理数据未加载的情况
    return <div>加载中...</div>;
  }

  const { salesData } = parentRouteData;
  // 渲染组件逻辑
  return <div>销售数据：{JSON.stringify(salesData)}</div>;
}

你也可以通过matches数组的索引定位父路由（比如matches[matches.length - 2]），但通过路由ID查找更稳定。

2. 服务器端实现并发请求去重 #

如果因为业务限制无法将Loader提升到父路由，可以在数据请求层做并发去重——通过缓存正在进行的请求Promise，让相同的并发请求复用同一个Promise结果。

实现示例： #

在你的数据请求模块中添加去重逻辑：

// 存储正在进行的请求，键为请求唯一标识
const pendingRequests = new Map();

async function fetchSales(request) {
  // 生成唯一缓存键（可根据请求路径、参数等组合）
  const url = new URL(request.url);
  const cacheKey = `${url.pathname}?${url.search}`;

  // 如果已有相同请求在处理，直接复用Promise
  if (pendingRequests.has(cacheKey)) {
    return pendingRequests.get(cacheKey);
  }

  try {
    // 发起实际请求
    const requestPromise = fetch("你的外部API地址", {
      // 请求配置
      method: "GET",
      headers: {
        // 必要的请求头
      }
    }).then(res => {
      if (!res.ok) throw new Error("请求失败");
      return res.json();
    });

    // 将Promise存入缓存
    pendingRequests.set(cacheKey, requestPromise);
    return await requestPromise;
  } finally {
    // 请求完成后移除缓存，避免内存泄漏
    pendingRequests.delete(cacheKey);
  }
}

这样即使两个Loader并发调用fetchSales，也只会发起一次实际的API请求。

3. 使用Remix的缓存API（补充方案） #

如果请求不是严格并发，或者可以接受短时间的数据缓存，可以使用Remix提供的缓存能力减少重复请求：

import { unstable_cache } from "@remix-run/node";
import type { LoaderFunction } from "@remix-run/node";

// 包装请求函数，添加缓存逻辑
const cachedFetchSales = unstable_cache(
  async (request) => fetchSales(request),
  // 缓存键：结合请求参数确保缓存唯一性
  ["sales-data", new URL(request.url).search],
  {
    revalidate: 30, // 30秒后自动重新验证缓存
    tags: ["sales"], // 可用于后续主动清除缓存
  }
);

export const loader: LoaderFunction = async ({ request }) => {
  const salesData = await cachedFetchSales(request);
  return { salesData };
};

注意unstable_cache目前是不稳定API，后续可能有变更，适合非核心业务场景使用。

内容的提问来源于stack exchange，提问作者harryg