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

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

تحديث دائمًا مع ذاكرة التخزين المؤقت: "no-store" (أي ما يعادل unstable_noStore())

هل تريد بيانات جديدة في كل مرة؟ ذاكرة التخزين المؤقت: "no-store" هو الخيار الذي يجب استخدامه. يتخطى خيار الجلب هذا ذاكرة التخزين المؤقت بالكامل ويحصل على أحدث البيانات مع كل طلب. إنه مثالي عندما تحتاج إلى الدقة في الوقت الفعلي، ولا يُسمح ببقايا الطعام من عملية الجلب بالأمس.

ملاحظة: يمكنك أيضًا استخدام unstable_noStore() إذا كنت تريد تخطي ذاكرة التخزين المؤقت على مكون الخادم. قد يتغير بناء الجملة لاحقًا، لذا التزم بـ ذاكرة التخزين المؤقت: 'no-store' لتحقيق الاستقرار.

إعادة استخدام البيانات مع ذاكرة التخزين المؤقت: "force-cache" (أي ما يعادل unstable_cache())

من ناحية أخرى، إذا كنت موافقًا على استخدام البيانات المخزنة مؤقتًا (فكر في المحتوى الثابت الذي لا يتغير كثيرًا)، فانتقل إلى cache: 'force-cache'. سيتم حفظ الاستجابة للاستخدام المستقبلي وتخطي طلبات الشبكة الزائدة.

ملاحظة: unstable_cache() يقوم أيضًا بتخزين البيانات مؤقتًا، ولكن استخدام ذاكرة التخزين المؤقت : 'force-cache' أكثر موثوقية إذا كنت تتجنب المفاجآت في المستقبل.

]

أبقِها متجددة مع عمليات إعادة التحقق

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

إعادة التحقق مع الوقت: next.revalidate

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

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

إعادة التحقق عند الطلب مع العلامات: revalidateTag()

الآن، تخيل أنه يمكنك إخبار Next.js بتحديث أجزاء معينة من البيانات المخزنة مؤقتًا عند حدوث شيء مهم - مثل إرسال نموذج أو نشر مدونة جديدة. يمكنك تعيين علامات لبياناتك المخزنة مؤقتًا، ثم إعادة التحقق من صحة هذه العلامات كلما لزم الأمر.

بهذه الطريقة، يمكنك تحديث أجزاء من ذاكرة التخزين المؤقت يدويًا عند الطلب دون انتظار عملية إعادة التحقق المجدولة التالية.

استخدام الأساليب غير المستقرة

إذا كنت من النوع المغامر، فيمكنك أيضًا استخدام أساليب unstable_noStore() وunstable_cache() مباشرة على مكونات الخادم لإدارة سلوك التخزين المؤقت. فقط ضع في اعتبارك أن هذه العناصر "غير مستقرة" لسبب ما، لذا قد تتغير في المستقبل (أو ربما تم تغييرها في الوقت الذي تقرأه فيه).

أو إذا كنت مهتمًا بالتخزين المؤقت، فإليك كيفية استخدام unstable_cache():

تخطي الحفر الدعامة

إليك خدعة رائعة: إذا كنت تجلب نفس البيانات عبر مكونات متعددة (مثل التخطيط والصفحة وبعض المكونات الداخلية)، فلا تقلق بشأن جلبها مرة واحدة في الأعلى وتمريرها إلى الأسفل أو الاضطرار إلى ذلك تقديم طلب لهذه البيانات عدة مرات على مكونات متعددة تؤدي إلى إبطاء الأداء. يقوم Next.js تلقائيًا بحفظ طلبات الجلب أثناء عرض الخادم، مما يعني أنه إذا قمت بجلب نفس البيانات عدة مرات، فمن الذكي بما يكفي الوصول إلى الشبكة مرة واحدة فقط ومشاركة النتيجة في مكونات متعددة.

التفاف عليه

يمنحك Next.js جميع الأدوات التي تحتاجها لإدارة التخزين المؤقت بشكل فعال، سواء من خلال خيارات جلب واجهة برمجة التطبيقات مثل cache: 'no-store' وcache: 'force-cache'، أو الطرق الأكثر تجريبية unstable_noStore() وunstable_cache(). أضف إستراتيجيات إعادة التحقق مثل next.revalidate وrevalidateTag، وستحصل على كل ما تحتاجه للحفاظ على بياناتك محدثة دون عناء.

مصادر:
التخزين المؤقت Next.js