Remix JS中如何实现请求作用域变量，单次请求复用用户数据

针对你遇到的单次请求内多模块重复调用用户API的问题，有两种可靠的解决方案，均基于Remix服务端的请求隔离特性实现：

方案一：利用Root Loader共享数据（推荐） #

Remix的路由体系中，根路由（root.tsx）的Loader数据会自动被所有子路由、组件共享，这是最符合Remix设计理念的方式，无需额外封装：

1. 在根路由的Loader中仅调用一次用户API并返回数据

// app/root.tsx
import { json } from "@remix-run/node";
import { useLoaderData, Outlet } from "@remix-run/react";
import Header from "./components/Header";
import Footer from "./components/Footer";

// 封装原始的用户API调用
async function fetchUserDetails() {
  const res = await fetch("https://your-api.com/user");
  if (!res.ok) throw new Error("Failed to fetch user");
  return res.json();
}

export async function loader() {
  // 单次请求内仅执行一次API调用
  const user = await fetchUserDetails();
  return json({ user });
}

export default function App() {
  const { user } = useLoaderData<typeof loader>();
  return (
    <html>
      <head>...</head>
      <body>
        {/* 直接将用户数据传递给页眉、页脚组件 */}
        <Header user={user} />
        <Outlet />
        <Footer user={user} />
      </body>
    </html>
  );
}

2. 子组件直接使用传入的用户数据，无需重复调用API

// app/components/Header.tsx
export default function Header({ user }) {
  return <header>欢迎回来，{user.nickname}</header>;
}

3. 子路由Loader需要用户数据时，通过useRouteLoaderData获取

// app/routes/dashboard.tsx
import { useRouteLoaderData } from "@remix-run/react";

export async function loader() {
  // 从根路由Loader获取已有的用户数据，避免重复请求
  const rootData = useRouteLoaderData("root") as typeof import("../root").loader;
  const user = rootData.user;
  
  // 基于用户数据执行其他逻辑
  const userStats = await fetch(`https://your-api.com/user/${user.id}/stats`);
  return json({ userStats });
}

方案二：自定义请求级缓存（灵活场景） #

如果你的场景不适合用Root Loader（比如多个独立Loader需要复用不同数据），可以通过Remix的请求上下文（loadContext）实现请求级别的缓存：

1. 在服务器配置中为每个请求创建独立缓存

// app/server.ts（或对应服务器入口文件，如Express/Cloudflare Workers）
import { createRequestHandler } from "@remix-run/node";
import * as build from "@remix-run/dev/server-build";

const handler = createRequestHandler({
  build,
  // 每个请求生成一个专属缓存Map，请求结束后自动销毁
  getLoadContext() {
    return {
      requestCache: new Map(),
    };
  },
});

// 服务器监听逻辑（以Express为例）
import express from "express";
const app = express();
app.all("*", handler);
app.listen(3000);

2. 封装带缓存的用户数据获取函数

// app/utils/user.ts
async function fetchUserDetails() {
  const res = await fetch("https://your-api.com/user");
  if (!res.ok) throw new Error("Failed to fetch user");
  return res.json();
}

// 利用请求上下文缓存数据
export async function getCachedUser(context) {
  const cacheKey = "user-details";
  // 缓存存在则直接返回，否则调用API并存入缓存
  if (context.requestCache.has(cacheKey)) {
    return context.requestCache.get(cacheKey);
  }
  const user = await fetchUserDetails();
  context.requestCache.set(cacheKey, user);
  return user;
}

3. 在任意Loader中使用缓存函数

// app/routes/profile.tsx
import { json } from "@remix-run/node";
import { getCachedUser } from "../utils/user";

export async function loader({ context }) {
  // 同一请求内多次调用只会触发一次API请求
  const user = await getCachedUser(context);
  return json({ user });
}

为什么全局变量不行？ #

Node.js是单进程多请求模型，全局变量会被所有请求共享，会导致不同用户的数据互相覆盖，完全不符合请求隔离的要求。而上面两种方案都是基于单次请求专属的上下文/数据，确保数据仅在当前请求内复用，不会干扰其他请求。

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