在Next.js中如何将API响应缓存到变量中实现运行时持久化？

服务端缓存（完全对应C#静态变量效果） #

Node.js 中的模块本身是单例模式，模块内定义的变量会在整个进程生命周期内共享，和C#静态变量的效果完全一致，不需要引入任何第三方库：

1. 新建缓存工具文件 lib/api-cache.ts

// 可选：带过期时间的缓存结构，不需要可直接简化为Record<string, any>
interface CacheItem {
  data: unknown;
  expireAt?: number;
}

// 模块级变量，进程不重启就不会被重置
let apiCache: Record<string, CacheItem> = {};

/**
 * 读取缓存
 * @param key 缓存键，一般用API请求地址或者唯一标识
 */
export const getCache = (key: string) => {
  const item = apiCache[key];
  if (!item) return null;
  // 过期判断，不需要可以删除
  if (item.expireAt && Date.now() > item.expireAt) {
    delete apiCache[key];
    return null;
  }
  return item.data;
};

/**
 * 写入缓存
 * @param ttl 缓存有效期，单位毫秒，不传则永久有效（直到进程重启）
 */
export const setCache = (key: string, data: unknown, ttl?: number) => {
  apiCache[key] = {
    data,
    ...(ttl ? { expireAt: Date.now() + ttl } : {})
  };
};

// 可选：清空缓存方法
export const clearCache = () => {
  apiCache = {};
};

2. 使用示例

import { getCache, setCache } from '@/lib/api-cache';

async function fetchApiData() {
  const cacheKey = 'your-api-endpoint';
  // 先读缓存
  const cachedData = getCache(cacheKey);
  if (cachedData) return cachedData;

  // 没有缓存则请求接口
  const res = await fetch('https://your-api-url.com/endpoint');
  const data = await res.json();
  // 写入缓存，设置1小时有效期，不需要过期就不传第三个参数
  setCache(cacheKey, data, 1000 * 60 * 60);
  return data;
}

注意事项 #

• 该缓存仅存在于服务端，不会同步到客户端
• 如果你使用Serverless部署（比如Vercel），每个函数实例有独立缓存，实例销毁后缓存会失效；如果是长期运行的standalone模式部署，缓存会持续生效

客户端运行时缓存 #

如果需要在用户浏览器端的应用运行期间缓存（刷新页面后失效），可以直接挂载到window全局对象上：

// 仅在客户端环境初始化
if (typeof window !== 'undefined') {
  window.clientApiCache = window.clientApiCache || {};
}

export const getClientCache = (key: string) => {
  if (typeof window === 'undefined') return null;
  return window.clientApiCache[key] ?? null;
};

export const setClientCache = (key: string, data: unknown) => {
  if (typeof window === 'undefined') return;
  window.clientApiCache[key] = data;
};

原生能力补充 #

Next.js 13+ App Router 自带fetch请求缓存能力，默认情况下同一个URL的请求会自动复用响应，不需要自定义缓存逻辑的场景可以直接使用原生能力。

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