如何失效Next.js Server Action缓存？解决调用后重复返回缓存数据问题

1. 直接禁用Server Action的缓存 #

Server Action默认会缓存返回结果，最简单的方式是通过配置缓存策略，让每次请求都拉取最新数据：

方式一：在fetch请求中禁用缓存

如果你的Server Action是通过fetch获取外部数据，直接在请求选项里设置cache: 'no-store'：

'use server'

export async function suggestOutline() {
  const res = await fetch('你的数据源地址', {
    cache: 'no-store' // 完全禁用缓存，每次请求都取最新数据
  })
  
  if (!res.ok) {
    throw new Error('请求数据源失败')
  }
  
  return res.json()
}

方式二：给Server Action设置全局缓存规则

如果Server Action是自行生成数据而非调用fetch，可以在文件顶部添加revalidate配置：

'use server'

// 0表示禁用缓存，每次请求都会重新生成数据
export const revalidate = 0

export async function suggestOutline() {
  // 这里写你的数据生成逻辑
  return { /* 返回的结果数据 */ }
}

2. 主动触发缓存失效（用revalidatePath/revalidateTag） #

如果需要在特定操作后（比如用户提交内容、更新后台数据）主动让缓存失效，就可以借助revalidateTag或revalidatePath：

步骤1：给缓存数据打标签

先在Server Action的fetch请求中给缓存数据打上自定义标签：

'use server'

export async function suggestOutline() {
  const res = await fetch('你的数据源地址', {
    next: {
      tags: ['outline-suggestions'] // 给缓存数据标记标签
    }
  })
  
  return res.json()
}

步骤2：在操作触发后失效缓存

在处理用户操作的Server Action中（比如提交表单的Action）调用revalidateTag，即可让所有带有该标签的缓存失效：

'use server'
import { revalidateTag } from 'next/cache'

export async function onUserSubmit() {
  // 执行用户提交的业务逻辑（比如保存数据到数据库）
  
  // 失效标记为outline-suggestions的缓存
  revalidateTag('outline-suggestions')
}

如果你的Server Action和某个页面路径强绑定，也可以用revalidatePath('/目标页面路径')来失效对应路径下的所有缓存，包括该路径调用的Server Action缓存。

额外注意 #

• revalidatePath和revalidateTag只能在Server Components或者Server Action内部调用，不能直接在客户端组件中使用。
• 你的useEffect代码建议添加空依赖数组，避免组件每次渲染都重复调用Server Action：

useEffect(() => {
  suggestOutline();
}, []);

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