Next.js 13 App Router中如何按标签重新验证缓存

第一步：给getData的请求绑定缓存标签 #

修改你的getData函数，在fetch请求中添加next.tags配置，把请求缓存和指定标签关联起来：

export default async function getData() {
  const res = await fetch('/api/admin', {
    next: {
      tags: ['admin-data'] // 自定义缓存标签名称，用于后续关联验证
    }
  })

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

这样Next.js会将该请求的缓存与admin-data标签绑定，后续只要触发这个标签的重新验证，getData就会重新拉取最新数据。

第二步：在删除函数中触发标签重新验证 #

根据删除逻辑的位置，分两种场景实现：

场景1：删除逻辑在API路由中

如果删除操作通过API路由处理，直接在路由内调用revalidateTag方法：

// app/api/delete/route.js
import { revalidateTag } from 'next/cache'
import { NextResponse } from 'next/server'

export async function DELETE() {
  // 执行删除数据库数据的业务逻辑
  // ...

  // 触发绑定了admin-data标签的缓存重新验证
  revalidateTag('admin-data')

  return NextResponse.json({ message: '删除成功，缓存已重新验证' })
}

场景2：删除逻辑在服务器组件中

如果删除操作直接在服务器组件内执行，同样可以调用revalidateTag：

// app/admin/page.js
import { revalidateTag } from 'next/cache'

export default async function AdminPage() {
  const handleDelete = async () => {
    // 执行删除操作（比如调用删除API或直接操作数据库）
    await fetch('/api/delete', { method: 'DELETE' })
    
    // 若直接在组件内操作数据库，可直接调用revalidateTag
    // revalidateTag('admin-data')
  }

  return (
    <button onClick={handleDelete}>删除数据</button>
  )
}

核心逻辑说明 #

• next.tags：为fetch请求的缓存打上标签，实现缓存的分组管理
• revalidateTag：调用后会立即清除所有绑定该标签的缓存，下次调用getData时会自动重新发起请求获取最新数据

内容的提问来源于stack exchange，提问作者Htet Ah Yan