React Academy · درس

‏unstable_cache وReact cache()

خزّن نتائج الدوال المكلفة مؤقتًا لكل طلب أو بين الطلبات باستخدام أدوات التخزين المؤقت في Next.js.

الدرس 2 من 412 خطوة

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

أداتا التخزين المؤقت

يوفّر Next.js أداتين متكاملتين للتخزين المؤقت: unstable_cache للتخزين الدائم عبر الطلبات، وcache() في React لإزالة التكرار لكل طلب.

React cache() — إزالة التكرار لكل طلب

تخزّن cache(fn) من React نتيجة دالة مؤقتًا طوال مدة عملية عرض واحدة على الخادم. وتحصل مكوّنات الخادم التي تستدعي الدالة المخزّنة نفسها على النتيجة ذاتها دون استدعاء ثانٍ لقاعدة البيانات أو API.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — التخزين المؤقت الدائم

تحافظ unstable_cache(fn, keyParts, options) على النتيجة بين الطلبات إلى أن يُعاد التحقق منها صراحةً. فكّر فيها على أنها fetch({ next: { revalidate } })، ولكن لأي دالة غير متزامنة، مثل استعلامات قاعدة البيانات واستدعاءات Redis وغيرها.

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

أجزاء مفتاح التخزين المؤقت

الوسيط الثاني في unstable_cache هو مصفوفة من السلاسل النصية التي تكوّن مفتاح التخزين المؤقت. أدرج جميع المتغيرات التي تؤثر في الناتج.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

الوسوم لإعادة التحقق عند الطلب

أضف وسومًا إلى الدوال المخزنة مؤقتًا وأبطِلها باستخدام revalidateTag() عند تغيّر البيانات، مثلًا بعد إجراء تعديل في إجراء خادم.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

إعادة التحقق المستندة إلى الوقت

اضبط revalidate: N في الخيارات لإعادة التحقق من التخزين المؤقت بعد N ثانية، بطريقة مشابهة لـ ISR مع استدعاءات fetch.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

دمج cache() و unstable_cache

استخدم cache() داخل unstable_cache للدوال التي تُستدعى من مواضع متعددة أثناء عملية تصيير واحدة: إزالة التكرار ضمن الطلب + الاستمرار بين الطلبات.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

قيود unstable_cache

تُصنَّف unstable_cache بأنها غير مستقرة لأن واجهة برمجتها قد تتغير قبل اعتمادها نهائيًا. ولا يمكن للدوال المخزنة مؤقتًا الوصول إلى بيانات خاصة بالطلب، مثل ملفات تعريف الارتباط أو الرؤوس.

React cache() لبيانات التخطيط

غلّف عمليات جلب البيانات على مستوى التخطيط باستخدام cache()، حتى يتشارك التخطيط وأي صفحة متداخلة تستدعي الدالة نفسها النتيجةَ ضمن عملية تصيير واحدة.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

متى تستخدم كل واحدة

cache(): تزيل تكرار الاستدعاءات المتطابقة ضمن عملية تصيير واحدة (الطلب نفسه). unstable_cache: تحافظ على النتائج بين الطلبات المتعددة إلى أن يُعاد التحقق منها. استخدم fetch مع next.revalidate عند استدعاء واجهات HTTP خارجية.

تحقق سريع

ما الفرق الأساسي بين cache() في React و unstable_cache في Next.js؟

أجب عليها في الدرس التفاعلي

مراجعة

تزيل cache(fn) تكرار الاستدعاءات ضمن مرحلة تصيير واحدة، لذا فهي مثالية لبيانات التخطيط والصفحة المشتركة. أما unstable_cache(fn, keys, { revalidate, tags }) فتحافظ على النتائج بين الطلبات، مع إبطالها استنادًا إلى الوقت أو الوسوم، لذا فهي مثالية لاستعلامات قواعد البيانات المكلفة.

البدء مجانًا

تعلم React مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 88
الدروس: 324

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «‏unstable_cache وReact cache()» مجاني؟

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

ماذا ستتعلم في «‏unstable_cache وReact cache()»؟

خزّن نتائج الدوال المكلفة مؤقتًا لكل طلب أو بين الطلبات باستخدام أدوات التخزين المؤقت في Next.js. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏unstable_cache وReact cache()»؟

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

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

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

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

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

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