import React, { experimental_useCache, Suspense } from 'react';

// Simulate an API call (replace with your actual API endpoint)
const fetchUserData = async (userId) => {
  console.log(`Fetching user data for user ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user data: ${response.status}`);
  }
  return response.json();
};

// Create a cached version of the fetchUserData function
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
User Profile
      
Name: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Loading user data...

شرح:

1. استيراد experimental_useCache: نستورد الخطاف الضروري من React.
2. تحديد fetchUserData: تحاكي هذه الدالة جلب بيانات المستخدم من واجهة برمجة تطبيقات. استبدل استدعاء API الوهمي بمنطق جلب البيانات الفعلي الخاص بك. تحاكي await new Promise زمن انتقال الشبكة، مما يجعل تأثير التخزين المؤقت أكثر وضوحًا. يتم تضمين معالجة الأخطاء للاستعداد للإنتاج.
3. إنشاء getCachedUserData: نستخدم experimental_useCache لإنشاء نسخة مخزنة مؤقتًا من الدالة fetchUserData. هذه هي الدالة التي سنستخدمها فعليًا في مكوننا.
4. استخدام getCachedUserData في UserProfile: يستدعي المكون UserProfile الدالة getCachedUserData لاسترداد بيانات المستخدم. نظرًا لأننا نستخدم experimental_useCache، فسيتم جلب البيانات من ذاكرة التخزين المؤقت إذا كانت متاحة بالفعل.
5. التضمين مع Suspense: يتم تضمين المكون UserProfile مع Suspense للتعامل مع حالة التحميل أثناء جلب البيانات. يضمن ذلك تجربة مستخدم سلسة، حتى إذا استغرقت البيانات بعض الوقت للتحميل.
6. مكالمات متعددة: يعرض المكون App مكونين UserProfile بنفس userId (1). سيستخدم المكون UserProfile الثاني البيانات المخزنة مؤقتًا، وتجنب استدعاء API الثاني. يتضمن أيضًا ملف تعريف مستخدم آخر بمعرف مختلف لتوضيح جلب البيانات غير المخزنة مؤقتًا.

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

التكامل مع Suspense

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

في المثال أعلاه، يغلف المكون Suspense المكون UserProfile ويوفر خاصية fallback. سيتم عرض واجهة المستخدم الاحتياطية هذه أثناء جلب بيانات المستخدم. بمجرد توفر البيانات، سيتم عرض المكون UserProfile مع البيانات التي تم جلبها.

React Server Components (RSCs) و experimental_useCache

يتألق experimental_useCache عند استخدامه مع React Server Components. في RSCs، يحدث جلب البيانات على الخادم، ويتم دفق النتائج إلى العميل. يمكن لـ experimental_useCache تحسين جلب البيانات من جانب الخادم بشكل كبير من خلال ضمان جلب البيانات مرة واحدة فقط لكل طلب، حتى إذا كانت مكونات متعددة تحتاج إلى نفس البيانات.

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

مثال (مثال RSC مفاهيمي):

// Server Component
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // Simulate fetching user data from a database
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate database query latency
  return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
Welcome, {userData.name}!
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
User Information
      
Email: {userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
Recent Activity
      
{userData.name} viewed the homepage.
    
  );
}

في هذا المثال المبسط، UserDashboard و UserInfo و UserActivity كلها Server Components. إنهم جميعًا بحاجة إلى الوصول إلى بيانات المستخدم. يضمن استخدام experimental_useCache استدعاء الدالة fetchUserData مرة واحدة فقط لكل طلب خادم، على الرغم من استخدامها في مكونات متعددة.

اعتبارات وعيوب محتملة

في حين أن experimental_useCache يوفر فوائد كبيرة، فمن المهم أن تكون على دراية بمحدودياته وعيوبه المحتملة:

• الحالة التجريبية: بصفتها واجهة برمجة تطبيقات تجريبية، فإن experimental_useCache عرضة للتغيير أو الإزالة في إصدارات React المستقبلية. استخدمه بحذر في بيئات الإنتاج وكن مستعدًا لتكييف التعليمات البرمجية الخاصة بك إذا لزم الأمر. راقب وثائق React الرسمية وملاحظات الإصدار للحصول على التحديثات.
• إبطال ذاكرة التخزين المؤقت: لا يوفر experimental_useCache آليات مدمجة لإبطال ذاكرة التخزين المؤقت. ستحتاج إلى تنفيذ استراتيجياتك الخاصة لإبطال ذاكرة التخزين المؤقت عند تغيير البيانات الأساسية. قد يتضمن ذلك استخدام خطافات مخصصة أو موفري سياق لإدارة عمر ذاكرة التخزين المؤقت.
• استخدام الذاكرة: يمكن أن يؤدي تخزين البيانات مؤقتًا إلى زيادة استخدام الذاكرة. كن على دراية بحجم البيانات التي تقوم بتخزينها مؤقتًا وفكر في استخدام تقنيات مثل إخلاء ذاكرة التخزين المؤقت أو انتهاء الصلاحية للحد من استهلاك الذاكرة. راقب استخدام الذاكرة في تطبيقك، خاصة في بيئات جانب الخادم.
• تسلسل الوسيطات: يجب أن تكون الوسيطات التي تم تمريرها إلى الدالة المخزنة مؤقتًا قابلة للتسلسل. وذلك لأن experimental_useCache يستخدم الوسيطات لإنشاء مفتاح ذاكرة التخزين المؤقت. إذا كانت الوسيطات غير قابلة للتسلسل، فقد لا تعمل ذاكرة التخزين المؤقت بشكل صحيح.
• تصحيح الأخطاء: يمكن أن يكون تصحيح مشكلات التخزين المؤقت أمرًا صعبًا. استخدم أدوات التسجيل وتصحيح الأخطاء لفحص ذاكرة التخزين المؤقت والتحقق من أنها تتصرف على النحو المتوقع. ضع في اعتبارك إضافة تسجيل تصحيح مخصص إلى الدالة fetchUserData لتتبع متى يتم جلب البيانات ومتى يتم استردادها من ذاكرة التخزين المؤقت.
• الحالة العامة: تجنب استخدام الحالة القابلة للتغيير العمومية داخل الدالة المخزنة مؤقتًا. يمكن أن يؤدي ذلك إلى سلوك غير متوقع ويجعل من الصعب التفكير في ذاكرة التخزين المؤقت. اعتمد على وسيطات الدالة والنتيجة المخزنة مؤقتًا للحفاظ على حالة متسقة.
• هياكل البيانات المعقدة: كن حذرًا عند تخزين هياكل البيانات المعقدة مؤقتًا، خاصةً إذا كانت تحتوي على مراجع دائرية. يمكن أن تؤدي المراجع الدائرية إلى حلقات لا نهائية أو أخطاء تجاوز سعة المكدس أثناء التسلسل.

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

نظرًا لأن experimental_useCache لا يتعامل مع الإبطال، فإليك بعض الاستراتيجيات التي يمكنك استخدامها:

• الإبطال اليدوي: قم بتنفيذ خطاف مخصص أو موفر سياق لتتبع عمليات تحويل البيانات. عند حدوث تحويل، قم بإبطال ذاكرة التخزين المؤقت عن طريق إعادة تعيين الدالة المخزنة مؤقتًا. يتضمن ذلك تخزين إصدار أو ختم زمني يتغير عند التحويل والتحقق من ذلك داخل الدالة `fetch`.

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("Fetching data with version:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Data for version ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Invoke the cache
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Example Usage:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidate Cache
       }
  
       // Wrap your App with DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• انتهاء الصلاحية المستندة إلى الوقت: قم بتنفيذ آلية انتهاء صلاحية ذاكرة التخزين المؤقت التي تبطل ذاكرة التخزين المؤقت تلقائيًا بعد فترة زمنية معينة. يمكن أن يكون هذا مفيدًا للبيانات الثابتة نسبيًا ولكنها قد تتغير من حين لآخر.
• الإبطال المستند إلى العلامات: قم بإقران العلامات بالبيانات المخزنة مؤقتًا وقم بإبطال ذاكرة التخزين المؤقت استنادًا إلى هذه العلامات. يمكن أن يكون هذا مفيدًا لإبطال البيانات ذات الصلة عند تغيير جزء معين من البيانات.
• WebSockets والتحديثات في الوقت الفعلي: إذا كان تطبيقك يستخدم WebSockets أو آليات تحديث أخرى في الوقت الفعلي، فيمكنك استخدام هذه التحديثات لتشغيل إبطال ذاكرة التخزين المؤقت. عند تلقي تحديث في الوقت الفعلي، قم بإبطال ذاكرة التخزين المؤقت للبيانات المتأثرة.

أفضل الممارسات لاستخدام experimental_useCache

للاستفادة الفعالة من experimental_useCache وتجنب المخاطر المحتملة، اتبع أفضل الممارسات هذه:

• استخدمه للعمليات المكلفة: استخدم experimental_useCache فقط للعمليات المكلفة حقًا، مثل جلب البيانات أو العمليات الحسابية المعقدة. يمكن أن يؤدي تخزين العمليات غير المكلفة مؤقتًا إلى تقليل الأداء فعليًا بسبب الحمل الزائد لإدارة ذاكرة التخزين المؤقت.
• تحديد مفاتيح ذاكرة التخزين المؤقت الواضحة: تأكد من أن الوسيطات التي تم تمريرها إلى الدالة المخزنة مؤقتًا تحدد بشكل فريد البيانات التي يتم تخزينها مؤقتًا. يعد هذا أمرًا بالغ الأهمية لضمان عمل ذاكرة التخزين المؤقت بشكل صحيح وعدم إعادة استخدام البيانات عن غير قصد. بالنسبة إلى وسيطات الكائن، ضع في اعتبارك تسلسلها وتجزئتها لإنشاء مفتاح متسق.
• تنفيذ استراتيجيات إبطال ذاكرة التخزين المؤقت: كما ذكرنا سابقًا، ستحتاج إلى تنفيذ استراتيجياتك الخاصة لإبطال ذاكرة التخزين المؤقت عند تغيير البيانات الأساسية. اختر إستراتيجية مناسبة لتطبيقك وبياناتك.
• مراقبة أداء ذاكرة التخزين المؤقت: راقب أداء ذاكرة التخزين المؤقت للتأكد من أنها تعمل على النحو المتوقع. استخدم أدوات التسجيل وتصحيح الأخطاء لتتبع مرات الوصول إلى ذاكرة التخزين المؤقت والإخفاقات وتحديد الاختناقات المحتملة.
• النظر في البدائل: قبل استخدام experimental_useCache، ضع في اعتبارك ما إذا كانت حلول التخزين المؤقت الأخرى قد تكون أكثر ملاءمة لاحتياجاتك. على سبيل المثال، إذا كنت بحاجة إلى حل تخزين مؤقت أكثر قوة مع ميزات مدمجة مثل إبطال ذاكرة التخزين المؤقت والإخلاء، فيمكنك التفكير في استخدام مكتبة تخزين مؤقت مخصصة. يمكن أن تكون المكتبات مثل `react-query` أو `SWR` أو حتى استخدام `localStorage` أكثر ملاءمة في بعض الأحيان.
• ابدأ صغيرًا: قدم experimental_useCache تدريجيًا في تطبيقك. ابدأ بتخزين عدد قليل من عمليات جلب البيانات الرئيسية مؤقتًا وقم بتوسيع استخدامه تدريجيًا مع اكتساب المزيد من الخبرة.
• توثيق إستراتيجية التخزين المؤقت الخاصة بك: قم بتوثيق إستراتيجية التخزين المؤقت الخاصة بك بوضوح، بما في ذلك البيانات التي يتم تخزينها مؤقتًا وكيف يتم إبطال ذاكرة التخزين المؤقت وأي قيود محتملة. سيجعل ذلك من السهل على المطورين الآخرين فهم التعليمات البرمجية الخاصة بك وصيانتها.
• الاختبار بدقة: اختبر تنفيذ التخزين المؤقت الخاص بك بدقة للتأكد من أنه يعمل بشكل صحيح وأنه لا يقدم أي أخطاء غير متوقعة. اكتب اختبارات الوحدة للتحقق من أن ذاكرة التخزين المؤقت يتم ملؤها وإبطالها على النحو المتوقع.

بدائل لـ experimental_useCache

في حين أن experimental_useCache يوفر طريقة ملائمة لإدارة التخزين المؤقت داخل React، إلا أنه ليس الخيار الوحيد المتاح. يمكن استخدام العديد من حلول التخزين المؤقت الأخرى في تطبيقات React، ولكل منها مزاياها وعيوبها.

• useMemo: يمكن استخدام الخطاف useMemo لتخزين نتائج العمليات الحسابية المكلفة مؤقتًا. في حين أنه لا يوفر تخزينًا مؤقتًا حقيقيًا عبر عمليات العرض، إلا أنه قد يكون مفيدًا لتحسين الأداء داخل مكون واحد. إنه أقل ملاءمة لجلب البيانات أو السيناريوهات التي تحتاج فيها البيانات إلى مشاركتها عبر المكونات.
• React.memo: React.memo هو مكون ذو ترتيب أعلى يمكن استخدامه لتخزين المكونات الوظيفية مؤقتًا. يمنع إعادة عرض المكون إذا لم تتغير خصائصه. يمكن أن يؤدي ذلك إلى تحسين الأداء في بعض الحالات، ولكنه لا يوفر تخزينًا مؤقتًا للبيانات.
• مكتبات التخزين المؤقت الخارجية (react-query، SWR): توفر مكتبات مثل react-query و SWR حلولاً شاملة لجلب البيانات وتخزينها مؤقتًا لتطبيقات React. توفر هذه المكتبات ميزات مثل إبطال ذاكرة التخزين المؤقت التلقائي وجلب البيانات في الخلفية والتحديثات المتفائلة. يمكن أن تكون خيارًا جيدًا إذا كنت بحاجة إلى حل تخزين مؤقت أكثر قوة مع ميزات متقدمة.
• التخزين المحلي / تخزين الجلسة: لحالات الاستخدام الأبسط أو استمرار البيانات عبر الجلسات، يمكن استخدام `localStorage` أو `sessionStorage`. ومع ذلك، يلزم إدارة التسلسل والإبطال وحدود التخزين يدويًا.
• حلول التخزين المؤقت المخصصة: يمكنك أيضًا إنشاء حلول التخزين المؤقت المخصصة الخاصة بك باستخدام واجهة برمجة تطبيقات سياق React أو تقنيات إدارة الحالة الأخرى. يمنحك هذا تحكمًا كاملاً في تنفيذ التخزين المؤقت، ولكنه يتطلب أيضًا مزيدًا من الجهد والخبرة.

خاتمة

يوفر React's experimental_useCache طريقة قوية ومريحة لإدارة التخزين المؤقت داخل تطبيقات React. من خلال تخزين نتائج العمليات المكلفة مؤقتًا، يمكنك تحسين الأداء بشكل كبير وتقليل طلبات الشبكة وتبسيط منطق جلب البيانات الخاص بك. عند استخدامه جنبًا إلى جنب مع Suspense و React Server Components، يمكن لـ experimental_useCache تعزيز تجربة المستخدم بشكل أكبر وتحسين أداء عرض الخادم.

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

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