Nuxt：能否实现内存跨请求缓存？构建时API数据缓存方案咨询

完全可以实现内存级缓存来满足你的需求，不过需要先澄清一个关键点：构建阶段（编译打包）发起API请求的话，数据会被固化到客户端代码中，无法自动刷新。更适合SSR场景的是在服务器启动时初始化内存缓存，后续所有SSR请求复用该缓存，同时实现24小时自动刷新逻辑。以下是具体实现步骤：

1. 全局缓存模块（管理数据与过期时间） #

创建一个独立的缓存工具文件（比如utils/server-cache.js），统一处理缓存逻辑：

let cachedData = null;
let cacheExpiry = null;
const CACHE_TTL = 24 * 60 * 60 * 1000; // 24小时毫秒数

// 获取缓存，自动处理过期刷新
async function getCachedData(fetchFn) {
  const now = Date.now();
  // 缓存存在且未过期，直接返回
  if (cachedData && cacheExpiry && now < cacheExpiry) {
    return cachedData;
  }
  // 缓存失效，重新请求并更新缓存
  cachedData = await fetchFn();
  cacheExpiry = now + CACHE_TTL;
  return cachedData;
}

// 手动触发缓存刷新（可选）
async function refreshCache(fetchFn) {
  cachedData = await fetchFn();
  cacheExpiry = Date.now() + CACHE_TTL;
  return cachedData;
}

export { getCachedData, refreshCache };

2. 在Vuex Action中整合缓存逻辑 #

修改你的getServerData action，让它优先读取内存缓存：

// store/actions.js
import { getCachedData } from '~/utils/server-cache';

export async function getServerData({ commit }) {
  // 封装API请求逻辑
  const fetchApiData = async () => {
    const res = await fetch('你的数据库API地址');
    return res.json();
  };

  // 从缓存获取或刷新数据
  const data = await getCachedData(fetchApiData);
  commit('SET_SERVER_DATA', data);
  return data;
}

3. 简化nuxtServerInit逻辑 #

现在nuxtServerInit不需要自己判断缓存，直接调用action即可：

async nuxtServerInit({ dispatch }) {
  await dispatch('getServerData');
}

4. 服务器启动时预加载缓存（可选） #

如果想让第一个SSR请求不用等待API响应，可以在服务器启动时提前加载缓存。创建一个server-only插件：

// plugins/server-preload-cache.js
import { getCachedData } from '~/utils/server-cache';

export default async () => {
  const fetchApiData = async () => {
    const res = await fetch('你的数据库API地址');
    return res.json();
  };
  await getCachedData(fetchApiData);
  console.log('服务器内存缓存已预加载');
};

在nuxt.config.js中配置该插件为服务器端专属：

export default {
  plugins: [
    { src: '~/plugins/server-preload-cache.js', mode: 'server' }
  ]
};

注意事项 #

• 内存缓存基于Node.js进程，若你的应用是多进程部署（如PM2多实例），每个进程会维护独立缓存，可能导致数据不一致。这种场景下Redis等分布式缓存更合适，但单进程部署完全满足需求。
• 若需要手动触发缓存刷新，可以添加一个serverMiddleware接口，调用refreshCache方法即可。
• 若坚持要在构建时缓存数据，数据会被打包到客户端代码中，无法自动刷新，只能通过重新构建更新数据，适合完全静态的场景。

内容的提问来源于stack exchange，提问作者d-_-b