cacheTag

تتيح لك دالة cacheTag وضع علامات على البيانات المخزنة مؤقتًا للإبطال عند الطلب. من خلال ربط العلامات بإدخالات ذاكرة التخزين المؤقت، يمكنك مسح أو إعادة التحقق من صحة إدخالات ذاكرة التخزين المؤقت المحددة بشكل انتقائي دون التأثير على البيانات المخزنة مؤقتًا الأخرى.

الاستخدام

لاستخدام cacheTag، قم بتمكين علامة dynamicIO في ملف next.config.js الخاص بك:

import type { NextConfig } from 'next'

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

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

export default nextConfig

تأخذ دالة cacheTag قيمة سلسلة واحدة، أو مصفوفة سلاسل.

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 في دالة أخرى، على سبيل المثال، معالج المسار أو إجراء الخادم:

'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')
}

معلومات مفيدة

  • علامات متطابقة: تطبيق نفس العلامة عدة مرات ليس له تأثير إضافي.
  • علامات متعددة: يمكنك تعيين عدة علامات لإدخال ذاكرة تخزين مؤقت واحد عن طريق تمرير مصفوفة إلى cacheTag.
cacheTag('tag-one', 'tag-two')

أمثلة

وضع علامات على المكونات أو الدوال

ضع علامات على البيانات المخزنة مؤقتًا عن طريق استدعاء cacheTag داخل دالة أو مكون مخزن مؤقتًا:

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

إنشاء علامات من بيانات خارجية

يمكنك استخدام البيانات التي تم إرجاعها من دالة غير متزامنة لوضع علامة على إدخال ذاكرة التخزين المؤقت.

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

إبطال ذاكرة التخزين المؤقت الموسومة

باستخدام revalidateTag، يمكنك إبطال ذاكرة التخزين المؤقت لعلامة محددة عند الحاجة:

'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')
}