cacheLife

تُستخدم دالة cacheLife لتعيين مدة صلاحية التخزين المؤقت لدالة أو مكون. يجب استخدامها جنبًا إلى جنب مع توجيه use cache، وفي نطاق الدالة أو المكون.

الاستخدام

لاستخدام cacheLife، قم بتمكين علامة 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

ثم قم باستيراد واستدعاء دالة cacheLife داخل نطاق الدالة أو المكون:

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife('hours')
  return <div>Page</div>
}

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife('hours')
  return <div>Page</div>
}

المرجع

ملفات التخزين المؤقت الافتراضية

يوفر Next.js مجموعة من ملفات التخزين المؤقت المسماة المصممة بناءً على مقاييس زمنية مختلفة. إذا لم تحدد ملف تخزين مؤقت في دالة cacheLife جنبًا إلى جنب مع توجيه use cache، فسيقوم Next.js تلقائيًا بتطبيق ملف التخزين المؤقت default.

ومع ذلك، نوصي دائمًا بإضافة ملف تخزين مؤقت عند استخدام توجيه use cache لتحديد سلوك التخزين المؤقت بشكل صريح.

قيم السلسلة المستخدمة للإشارة إلى ملفات التخزين المؤقت لا تحمل معنى متأصلًا؛ بدلاً من ذلك تعمل كعلامات دلالية. وهذا يسمح لك بفهم وإدارة المحتوى المخزن مؤقتًا داخل قاعدة الكود الخاصة بك بشكل أفضل.

جيد أن تعرف: تحديث خيارات التكوين staleTimes و expireTime يقوم أيضًا بتحديث خصائص stale و expire لملف التخزين المؤقت default.

ملفات التخزين المؤقت المخصصة

يمكنك تكوين ملفات تخزين مؤقت مخصصة عن طريق إضافتها إلى خيار cacheLife في ملف next.config.ts الخاص بك.

ملفات التخزين المؤقت هي كائنات تحتوي على الخصائص التالية:

تختلف الخاصية "stale" عن إعداد staleTimes في أنها تتحكم تحديدًا في التخزين المؤقت للراوتر على جانب العميل. بينما staleTimes هو إعداد عام يؤثر على جميع حالات البيانات الديناميكية والثابتة، يسمح تكوين cacheLife لك بتحديد أوقات "stale" على أساس كل دالة أو كل مسار.

جيد أن تعرف: الخاصية "stale" لا تعين رأس Cache-control: max-age. بدلاً من ذلك تتحكم في التخزين المؤقت للراوتر على جانب العميل.

أمثلة

تعريف ملفات التخزين المؤقت القابلة لإعادة الاستخدام

يمكنك إنشاء ملف تخزين مؤقت قابل لإعادة الاستخدام عن طريق تعريفها في ملف next.config.ts الخاص بك. اختر اسمًا يناسب حالة الاستخدام الخاصة بك وقم بتعيين قيم لخصائص stale و revalidate و expire. يمكنك إنشاء العديد من ملفات التخزين المؤقت المخصصة حسب الحاجة. يمكن الإشارة إلى كل ملف باسمه كقيمة سلسلة يتم تمريرها إلى دالة cacheLife.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      biweekly: {
        stale: 60 * 60 * 24 * 14, // 14 يومًا
        revalidate: 60 * 60 * 24, // 1 يوم
        expire: 60 * 60 * 24 * 14, // 14 يومًا
      },
    },
  },
}

module.exports = nextConfig

const nextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      biweekly: {
        stale: 60 * 60 * 24 * 14, // 14 يومًا
        revalidate: 60 * 60 * 24, // 1 يوم
        expire: 60 * 60 * 24 * 14, // 14 يومًا
      },
    },
  },
}

module.exports = nextConfig

يخزن المثال أعلاه لمدة 14 يومًا، ويتحقق من التحديثات يوميًا، وينتهي صلاحية التخزين المؤقت بعد 14 يومًا. يمكنك بعد ذلك الإشارة إلى هذا الملف في جميع أنحاء تطبيقك باسمه:

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife('biweekly')
  return <div>Page</div>
}

تجاوز ملفات التخزين المؤقت الافتراضية

بينما توفر ملفات التخزين المؤقت الافتراضية طريقة مفيدة للتفكير في مدى حداثة أو قدم أي جزء من المخرجات القابلة للتخزين المؤقت، فقد تفضل ملفات مسماة مختلفة لتتوافق بشكل أفضل مع استراتيجيات التخزين المؤقت لتطبيقاتك.

يمكنك تجاوز ملفات التخزين المؤقت المسماة الافتراضية عن طريق إنشاء تكوين جديد بنفس أسماء الملفات الافتراضية.

يوضح المثال أدناه كيفية تجاوز ملف التخزين المؤقت الافتراضي "days":

const nextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      days: {
        stale: 3600, // 1 ساعة
        revalidate: 900, // 15 دقيقة
        expire: 86400, // 1 يوم
      },
    },
  },
}

module.exports = nextConfig

تعريف ملفات التخزين المؤقت داخل السطر

لحالات استخدام محددة، يمكنك تعيين ملف تخزين مؤقت مخصص عن طريق تمرير كائن إلى دالة cacheLife:

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife({
    stale: 3600, // 1 ساعة
    revalidate: 900, // 15 دقيقة
    expire: 86400, // 1 يوم
  })

  return <div>Page</div>
}

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife({
    stale: 3600, // 1 ساعة
    revalidate: 900, // 15 دقيقة
    expire: 86400, // 1 يوم
  })

  return <div>Page</div>
}

سيتم تطبيق ملف التخزين المؤقت داخل السطر هذا فقط على الدالة أو الملف الذي تم إنشاؤه فيه. إذا كنت ترغب في إعادة استخدام نفس الملف في جميع أنحاء تطبيقك، يمكنك إضافة التكوين إلى خاصية cacheLife في ملف next.config.ts الخاص بك.

الاستخدام المتداخل لـ use cache و cacheLife

عند تحديد سلوكيات تخزين مؤقت متعددة في نفس المسار أو شجرة المكونات، إذا حددت التخزينات المؤقتة الداخلية ملف cacheLife الخاص بها، فسوف يحترم التخزين المؤقت الخارجي أقصر مدة تخزين مؤقت بينها. ينطبق هذا فقط إذا لم يكن للتخزين المؤقت الخارجي ملف cacheLife صريح خاص به.

على سبيل المثال، إذا أضفت توجيه use cache إلى صفحتك، دون تحديد ملف تخزين مؤقت، فسيتم تطبيق ملف التخزين المؤقت الافتراضي ضمنيًا (cacheLife(”default”)). إذا استخدم مكون مستورد في الصفحة توجيه use cache مع ملف التخزين المؤقت الخاص به، تتم مقارنة ملفات التخزين المؤقت الخارجية والداخلية، وسيتم تطبيق أقصر مدة محددة في الملفات.

// المكون الأب
import { unstable_cacheLife as cacheLife } from 'next/cache'
import { ChildComponent } from './child'

export async function ParentComponent() {
  'use cache'
  cacheLife('days')

  return (
    <div>
      <ChildComponent />
    </div>
  )
}

وفي ملف منفصل، قمنا بتعريف المكون الفرعي الذي تم استيراده:

// المكون الفرعي
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function ChildComponent() {
  'use cache'
  cacheLife('hours')
  return <div>Child Content</div>

  // سوف يحترم تخزين هذا المكون المؤقت ملف 'hours' الأقصر
}