cacheTag

此功能目前在 canary 频道中可用，可能会发生变化。通过升级 Next.js 试用，并在 GitHub 上分享您的反馈。

cacheTag 函数允许您标记缓存数据以进行按需失效。通过将标签与缓存条目关联，您可以选择性地清除或重新验证特定的缓存条目，而不会影响其他缓存数据。

用法

要使用 cacheTag，请在你的 next.config.js 文件中启用 dynamicIO 标志

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}
 
export default nextConfig

cacheTag 函数接受一个字符串值或一个字符串数组。

app/data.ts

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
export async function getData() {
  'use cache'
  cacheTag('my-data')
  const data = await fetch('/api/data')
  return data
}

然后，你可以使用 revalidateTag API 在另一个函数中按需清除缓存，例如，路由处理程序或服务器操作

app/action.ts

'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function submit() {
  await addPost()
  revalidateTag('my-data')
}

须知

幂等标签：多次应用相同的标签不会产生额外的效果。
多个标签：你可以通过将数组传递给 cacheTag，为一个缓存条目分配多个标签。

cacheTag('tag-one', 'tag-two')

示例

标记组件或函数

通过在缓存的函数或组件中调用 cacheTag 来标记你的缓存数据

app/components/bookings.tsx

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
interface BookingsProps {
  type: string
}
 
export async function Bookings({ type = 'haircut' }: BookingsProps) {
  'use cache'
  cacheTag('bookings-data')
 
  async function getBookingsData() {
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    return data
  }
 
  return //...
}

从外部数据创建标签

你可以使用从异步函数返回的数据来标记缓存条目。

app/components/bookings.tsx

import { unstable_cacheTag as cacheTag } from 'next/cache'
 
interface BookingsProps {
  type: string
}
 
export async function Bookings({ type = 'haircut' }: BookingsProps) {
  async function getBookingsData() {
    'use cache'
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    cacheTag('bookings-data', data.id)
    return data
  }
  return //...
}

使标记缓存失效

使用 revalidateTag，你可以在需要时使特定标签的缓存失效

app/actions.ts

'use server'
 
import { revalidateTag } from 'next/cache'
 
export async function updateBookings() {
  await updateBookingData()
  revalidateTag('bookings-data')
}

cacheTag

用法

须知

示例

标记组件或函数

从外部数据创建标签

使标记缓存失效

相关

dynamicIO

use cache

revalidateTag

cacheLife