Next.js • المستوى الثاني • الدرس 3

استراتيجيات التخزين الموقت والتحديث (Caching & Revalidation)

أهداف الدرس العلمية

فهم خيارات cache: 'force-cache' للتخزين الدائم و cache: 'no-store' للبيانات الحية.
تحديد وقت تحديث البيانات التلقائي بـ next: { revalidate: 60 }.
التعرف على مفهوم ISR (Incremental Static Regeneration).
اختيار استراتيجية التخزين المناسبة حسب طبيعة البيانات.

1. تحسين سرعة الأداء بـ Caching

تتيح لك Next.js اختيار طريقة حفظ البيانات تلقائياً لجعل سرعة التصفح فورية وسلسة لأقصى درجة.

javascript

// 🔒 تخزين دائم (Static)
fetch(url, { cache: 'force-cache' });

// 🔄 بيانات حية دائماً (Dynamic)
fetch(url, { cache: 'no-store' });

// ⏱️ تحديث كل 60 ثانية (ISR)
fetch(url, { next: { revalidate: 60 } });

2. مقارنة استراتيجيات التخزين الثلاث

🔒 force-cache

تخزين دائم — أسرع لكن البيانات قد تكون قديمة.

🔄 no-store

جلب حي في كل طلب — أبطأ لكن البيانات محدثة.

⏱️ revalidate: 60

تحديث خلف الكواليس كل 60 ثانية — توازن مثالي.

التطبيق العملي المباشر

تحدي الدرس الثالث: تعديل وقت التحديث

قم بالتعديل على الكود في المحرر أدناه:

عدّل قيمة revalidate داخل خيارات الـ fetch من 60 إلى 10.
عدّل النص المعروض في الصفحة ليصبح: "كل 10 ثوانٍ" بدل "كل دقيقة واحدة".
عدّل قيمة العرض في الصندوق الداكن ليصبح 10 ثوانٍ.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع