NextJS生产环境下SWR mutate()无法从端点获取新数据该如何排查？

1. 检查SWR mutate的调用参数 #

生产环境下SWR的缓存优先级更高，默认mutate(key)可能复用缓存而非强制重新请求。确保调用时明确触发重新验证：

// 错误写法：仅更新缓存，可能不发起新请求
mutate('/api/data');

// 正确写法：强制从后端拉取最新数据
mutate('/api/data', null, { revalidate: true });

如果更新接口直接返回最新数据，也可以传入新数据后仍强制验证，确保与后端完全一致：

const updateData = async (newValue) => {
  const res = await fetch('/api/update', {
    method: 'POST',
    body: JSON.stringify(newValue),
    headers: { 'Content-Type': 'application/json' }
  });
  const updatedData = await res.json();
  // 传入新数据后仍触发重新验证
  mutate('/api/data', updatedData, { revalidate: true });
};

2. 排查API路由的缓存配置 #

NextJS生产环境（尤其是Vercel部署）中，API路由默认会被CDN缓存。如果数据接口没设置正确的缓存头，mutate请求会拿到旧缓存数据。在API路由中添加禁止缓存的响应头：

// pages/api/data.js
export default async function handler(req, res) {
  // 禁止CDN和浏览器缓存动态数据
  res.setHeader('Cache-Control', 'no-store, max-age=0');
  
  // 数据库查询逻辑
  const data = await fetchFromMongoDB();
  res.status(200).json(data);
}

3. 检查SWR的全局/局部配置 #

如果全局配置了过大的dedupingInterval，会导致短时间内重复请求被合并，影响更新后的重新获取：

// 全局配置示例（避免设置过大的dedupingInterval）
<SWRConfig
  value={{
    dedupingInterval: 1000, // 1秒，而非默认2秒或更大值
    revalidateOnFocus: true,
    revalidateOnReconnect: true
  }}
>
  <App />
</SWRConfig>

同时确保useSWR的局部配置没有禁用重新验证：

const { data, mutate } = useSWR('/api/data', fetcher, {
  revalidateOnMount: true,
  revalidateOnFocus: true,
  revalidateOnReconnect: true
});

4. 确认NextJS的渲染模式 #

如果页面是静态生成（SSG）的，构建时数据就被固化，更新后不会自动刷新。需要改为服务器端渲染（SSR）或增量静态再生（ISR）：

• SSR模式：使用getServerSideProps获取数据，每次请求都从后端拉取最新值。
• ISR模式：在getStaticProps中设置revalidate: 60（每60秒重新生成页面），或更新后手动触发页面再生（Vercel环境可通过API调用实现）。

5. 排查乐观更新的逻辑问题 #

如果用了乐观更新，要确保请求失败时有回滚逻辑，避免生产环境因错误处理不当导致缓存未正确更新：

const updateCell = async (id, newValue) => {
  // 乐观更新：先临时更新缓存
  const previousData = [...data];
  mutate('/api/data', data.map(item => item.id === id ? {...item, value: newValue} : item), false);
  
  try {
    await fetch('/api/update', {
      method: 'POST',
      body: JSON.stringify({ id, newValue }),
      headers: { 'Content-Type': 'application/json' }
    });
    // 乐观更新后触发重新验证，确保与后端一致
    mutate('/api/data', null, { revalidate: true });
  } catch (error) {
    // 请求失败，回滚缓存
    mutate('/api/data', previousData, false);
    console.error('更新失败:', error);
  }
};

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