React Academy · درس

‏fetch() مع خيارات التخزين المؤقت في Next.js

استخدم خيارات force-cache وno-store وrevalidate مع fetch للتحكم في سلوك التخزين المؤقت.

‏fetch() مع خيارات التخزين المؤقت في Next.js درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

توسعة fetch في Next.js

يوسّع Next.js واجهة fetch() الأصلية بخيار next للتحكم في التخزين المؤقت وإعادة التحقق. ولا يعمل هذا إلا في مكوّنات الخادم ومعالجات المسارات.

force-cache (الافتراضي)

يستخدم fetch() في Next.js الخيار force-cache افتراضيًا، إذ يخزّن الاستجابة مؤقتًا إلى أجل غير محدد ويعيد استخدامها لجميع الطلبات إلى أن تتم إعادة التحقق منها صراحةً.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — دائمًا محدّث

يعطّل no-store التخزين المؤقت بالكامل. ويصل كل طلب إلى المصدر. استخدمه للبيانات الشخصية أو الحساسة.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR معتمد على الوقت

يخزّن الخيار next.revalidate الاستجابة مؤقتًا، لكنه يعيد التحقق منها في الخلفية كل N ثانية، وفق نمط stale-while-revalidate.

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate على مستوى المقطع

صدّر ثابتًا باسم revalidate من صفحة أو تخطيط لتطبيق فترة إعادة التحقق على جميع عمليات fetch في ذلك المقطع.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — إعادة التحقق المعتمدة على الوسوم

عيّن وسومًا لاستدعاء fetch باستخدام next.tags. واستخدم revalidateTag(tag) في Server Action أو معالج مسار لإبطال جميع ذاكرات التخزين المؤقت الموسومة عند الطلب.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

يبطل revalidatePath(path) ذاكرة التخزين المؤقت لمسار URL محدد، ما يؤدي إلى إعادة توليده عند الطلب التالي.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

تعطيل التخزين المؤقت بسبب الدوال الديناميكية

يؤدي استدعاء cookies() أو headers() أو قراءة searchParams في صفحة إلى جعلها ديناميكية، وبالتالي تعطيل التخزين المؤقت لها بالكامل.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

إزالة التكرار

يزيل Next.js تكرار استدعاءات fetch المتطابقة ضمن عملية عرض واحدة. فإذا جلب مكوّنان من مكوّنات الخادم عنوان URL نفسه، يُرسل طلب HTTP واحد فقط.

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

توجد طبقتان للتخزين المؤقت: مذكرة الطلب، التي تزيل التكرار تلقائيًا لكل طلب، وذاكرة بيانات التخزين المؤقت الدائمة، التي تتحكم فيها خيارات cache وrevalidate.

تصحيح سلوك التخزين المؤقت

شغّل next build وتحقق من ناتج البناء؛ إذ يعرض كل مسار استراتيجية عرضه: ثابت (مخزّن مؤقتًا)، أو ديناميكي (دون تخزين مؤقت)، أو ISR (فترة إعادة تحقق).

تحقق سريع

أي خيار لتخزين fetch مؤقتًا ينبغي استخدامه للبيانات التي نادرًا ما تتغير، لكن ينبغي تحديثها دون إعادة نشر كاملة؟

مراجعة

استخدم cache: 'force-cache' للبيانات الثابتة، وcache: 'no-store' للبيانات التي يجب أن تكون محدّثة دائمًا، وnext: { revalidate: N } لـ ISR. أضف وسومًا إلى عمليات fetch باستخدام next.tags، واستدعِ revalidateTag() للإبطال عند الطلب. وتؤدي الدوال الديناميكية تلقائيًا إلى تعطيل التخزين المؤقت للصفحات.

الأسئلة الشائعة

هل درس «‏fetch() مع خيارات التخزين المؤقت في Next.js» مجاني؟

نعم — نص درس «‏fetch() مع خيارات التخزين المؤقت في Next.js» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏fetch() مع خيارات التخزين المؤقت في Next.js»؟

استخدم خيارات force-cache وno-store وrevalidate مع fetch للتحكم في سلوك التخزين المؤقت. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «‏fetch() مع خيارات التخزين المؤقت في Next.js»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

‏fetch() مع خيارات التخزين المؤقت في Next.js
‏unstable_cache وReact cache()
إعادة التوليد الساكن التدريجي (ISR)
إجراءات الخادم لطفرات البيانات

← العودة إلى React Academy