如何在Remix.run的Loader中实现周期性数据获取？

核心思路 #

不需要长运行函数，用内存缓存+时间戳判断即可实现，完全不用数据库，代码逻辑简单直接。

具体实现步骤 #

1. 封装缓存逻辑模块 #

在项目中创建一个单独的工具模块（比如app/utils/cachedSharedData.js），用来维护缓存数据、上次请求时间，以及判断是否需要刷新数据：

// app/utils/cachedSharedData.js
// 初始化缓存数据和时间戳
let cachedData = null;
let lastFetchTimestamp = 0;
// 设置刷新间隔为1分钟（单位：毫秒）
const REFRESH_INTERVAL = 60 * 1000;

export async function getCachedSharedData() {
  const currentTime = Date.now();
  
  // 判断是否需要重新请求API：缓存为空 或 距离上次请求已超过1分钟
  if (!cachedData || currentTime - lastFetchTimestamp > REFRESH_INTERVAL) {
    // 调用目标API
    const apiResponse = await fetch("你的目标API地址");
    cachedData = await apiResponse.json();
    // 更新上次请求时间
    lastFetchTimestamp = currentTime;
  }
  
  return cachedData;
}

2. 在路由Loader中调用缓存函数 #

直接在你的路由Loader里调用上面封装的函数，返回缓存数据即可：

// 你的路由文件（比如app/routes/price.js）
import { json } from "@remix-run/node";
import { getCachedSharedData } from "~/utils/cachedSharedData";

export const loader = async () => {
  const result = await getCachedSharedData();
  return json(result);
};

关键说明 #

• 开发模式注意：Remix开发环境下热重载会清空内存缓存，每次代码变更后会重新请求API，这是正常行为；生产环境中进程持续运行，缓存会稳定保持。
• 容错优化（可选）：如果API请求可能失败，可以添加重试逻辑，避免缓存失效后返回错误给用户。
• 多实例局限：如果部署了多个服务器实例（比如负载均衡场景），每个实例会独立维护自己的内存缓存，可能导致重复请求API；但单实例部署时，这是最轻量化的方案。

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