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 حرفًا.

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