APIリファレンスFunctionscacheTag

cacheTag

cacheTag関数を使用すると、キャッシュされたデータをオンデマンドで無効化するためのタグを付けられます。キャッシュエントリにタグを関連付けることで、他のキャッシュされたデータに影響を与えることなく、特定のキャッシュエントリを選択的にパージまたは再検証できます。

使用方法

cacheTagを使用するには、next.config.jsファイルでcacheComponentsフラグを有効にしてください。

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

cacheTag関数は、1つ以上の文字列値を受け取ります。

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

その後、他の関数（例：ルートハンドラーやServer Action）でrevalidateTag APIを使用して、キャッシュをオンデマンドでパージできます。

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

Good to know

べき等なタグ：同じタグを複数回適用しても、追加の効果はありません。
複数のタグ：cacheTagに複数の文字列値を渡すことで、単一のキャッシュエントリに複数のタグを割り当てることができます。

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

制限：カスタムタグの最大長は256文字、最大タグアイテム数は128です。

例

コンポーネントまたは関数のタグ付け

キャッシュされた関数またはコンポーネント内でcacheTagを呼び出すことで、キャッシュされたデータをタグ付けします。

import { 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 { 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を使用して、特定のタグのキャッシュを無効化できます。

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

関連する API リファレンスを表示します。

cacheTag

使用方法

Good to know

例

コンポーネントまたは関数のタグ付け

外部データからタグを作成する

タグ付けされたキャッシュの無効化

関連

cacheComponents

use cache

revalidateTag

cacheLife