cacheTag

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

¥The cacheTag function allows you to tag cached data for on-demand invalidation. By associating tags with cache entries, you can selectively purge or revalidate specific cache entries without affecting other cached data.

用法

¥Usage

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

¥To use cacheTag, enable the dynamicIO flag in your next.config.js file:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

const nextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

cacheTag 函数采用单个字符串值或字符串数​​组。

¥The cacheTag function takes a single string value, or a string array.

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
}

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 按需清除缓存：

¥You can then purge the cache on-demand using revalidateTag API in another function, for example, a route handler or Server Action:

'use server'

import { revalidateTag } from 'next/cache'

export default async function submit() {
  await addPost()
  revalidateTag('my-data')
}

'use server'

import { revalidateTag } from 'next/cache'

export default async function submit() {
  await addPost()
  revalidateTag('my-data')
}

很高兴知道

¥Good to know

• 幂等标签：多次应用相同的标签没有额外的效果。

  ¥Idempotent Tags: Applying the same tag multiple times has no additional effect.

• 多个标签：你可以通过将数组传递给 cacheTag 来将多个标签分配给单个缓存条目。

  ¥Multiple Tags: You can assign multiple tags to a single cache entry by passing an array to cacheTag.

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

示例

¥Examples

标记组件或功能

¥Tagging components or functions

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

¥Tag your cached data by calling cacheTag within a cached function or component:

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 //...
}

import { unstable_cacheTag as cacheTag } from 'next/cache'

export async function Bookings({ type = 'haircut' }) {
  'use cache'
  cacheTag('bookings-data')

  async function getBookingsData() {
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    return data
  }

  return //...
}

从外部数据创建标签

¥Creating tags from external data

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

¥You can use the data returned from an async function to tag the cache entry.

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 //...
}

import { unstable_cacheTag as cacheTag } from 'next/cache'

export async function Bookings({ type = 'haircut' }) {
  async function getBookingsData() {
    'use cache'
    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
    cacheTag('bookings-data', data.id)
    return data
  }
  return //...
}

使标记缓存无效

¥Invalidating tagged cache

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

¥Using revalidateTag, you can invalidate the cache for a specific tag when needed:

'use server'

import { revalidateTag } from 'next/cache'

export async function updateBookings() {
  await updateBookingData()
  revalidateTag('bookings-data')
}

'use server'

import { revalidateTag } from 'next/cache'

export async function updateBookings() {
  await updateBookingData()
  revalidateTag('bookings-data')
}