fetch

يقوم Next.js بتمديد واجهة برمجة تطبيقات fetch() الأصلية على الويب للسماح لكل طلب على الخادم بتعيين دلالات التخزين المؤقت الخاصة به بشكل دائم.

في المتصفح، يشير خيار cache إلى كيفية تفاعل طلب fetch مع ذاكرة التخزين المؤقت HTTP للمتصفح. مع هذا الامتداد، يشير cache إلى كيفية تفاعل طلب fetch من جانب الخادم مع ذاكرة التخزين المؤقت HTTP الدائمة للإطار.

يمكنك استدعاء fetch مع async و await مباشرة داخل مكونات الخادم.

export default async function Page() {
  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
  // مشابه لـ `getStaticProps`.
  // `force-cache` هو الإعداد الافتراضي ويمكن حذفه.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // يجب إعادة جلب هذا الطلب في كل طلب.
  // مشابه لـ `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // يجب تخزين هذا الطلب مؤقتًا مع عمر افتراضي قدره 10 ثوانٍ.
  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

export default async function Page() {
  // يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
  // مشابه لـ `getStaticProps`.
  // `force-cache` هو الإعداد الافتراضي ويمكن حذفه.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // يجب إعادة جلب هذا الطلب في كل طلب.
  // مشابه لـ `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // يجب تخزين هذا الطلب مؤقتًا مع عمر افتراضي قدره 10 ثوانٍ.
  // مشابه لـ `getStaticProps` مع خيار `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

fetch(url, options)

بما أن Next.js يمدد واجهة برمجة تطبيقات fetch() على الويب، يمكنك استخدام أي من الخيارات الأصلية المتاحة.

options.cache

تكوين كيفية تفاعل الطلب مع ذاكرة التخزين المؤقت للبيانات في Next.js.

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

• force-cache (الافتراضي) - يبحث Next.js عن طلب مطابق في ذاكرة التخزين المؤقت للبيانات.
  • إذا كان هناك تطابق وكان حديثًا، سيتم إرجاعه من ذاكرة التخزين المؤقت.
  • إذا لم يكن هناك تطابق أو تطابق قديم، سيقوم Next.js بجلب المورد من الخادم البعيد وتحديث ذاكرة التخزين المؤقت بالمورد الذي تم تنزيله.
• no-store - يقوم Next.js بجلب المورد من الخادم البعيد في كل طلب دون البحث في ذاكرة التخزين المؤقت، ولن يقوم بتحديث ذاكرة التخزين المؤقت بالمورد الذي تم تنزيله.

معلومة مفيدة:

• إذا لم تقم بتوفير خيار cache، سيقوم Next.js بالافتراضي إلى force-cache، ما لم يتم استخدام وظيفة ديناميكية مثل cookies()، وفي هذه الحالة سيكون الافتراضي هو no-store.
• يعمل خيار no-cache بنفس طريقة no-store في Next.js.

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

تعيين عمر ذاكرة التخزين المؤقت للمورد (بالثواني).

• false - تخزين المورد مؤقتًا إلى أجل غير مسمى. يعادل دلاليًا revalidate: Infinity. قد تقوم ذاكرة التخزين المؤقت HTTP بإزالة الموارد القديمة بمرور الوقت.
• 0 - منع تخزين المورد مؤقتًا.
• number - (بالثواني) تحديد أن يكون للمورد عمر تخزين مؤقت بحد أقصى n ثانية.

معلومة مفيدة:

• إذا قام طلب fetch() فردي بتعيين رقم revalidate أقل من الافتراضي revalidate لمسار، فسيتم تقليل فاصل إعادة التحقق بالكامل للمسار.
• إذا كان هناك طلبا fetch بنفس URL في نفس المسار لهما قيم revalidate مختلفة، سيتم استخدام القيمة الأقل.
• لتسهيل الأمر، ليس من الضروري تعيين خيار cache إذا تم تعيين revalidate على رقم حيث أن 0 تعني cache: 'no-store' والقيمة الموجبة تعني cache: 'force-cache'.
• الخيارات المتضاربة مثل { revalidate: 0, cache: 'force-cache' } أو { revalidate: 10, cache: 'no-store' } ستؤدي إلى حدوث خطأ.

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

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

سجل الإصدارات