تخزين استجابات واجهة برمجة التطبيقات في React - Apidog

في هذه المقالة، سوف نستكشف مفهوم تخزين البيانات (API caching)، ونتحدث عن إنشاء مكون تخزين مخصص في React، ونستعرض مختلف الأدوات والحزم التي تبسط العملية. سواء كنت تبحث عن تنفيذ حل تخزين أساسي أو الاستفادة من أدوات متقدمة مثل React Query و SWR، ستوفر لك هذه الدليل الرؤى والخطوات العملية اللازمة لتحسين تطبيقات React الخاصة بك مع تخزين استجابة API بشكل فعال.

لماذا تخزين استجابة API في React؟

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

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

إنشاء مكون تخزين مخصص

إنشاء مكون تخزين مخصص في React يتيح التحكم الدقيق في كيفية تخزين البيانات وإدارتها. تقدم هذه القسم دليل خطوة بخطوة لبناء مثل هذا المكون، مع مناقشة حول عيوبه.

إعداد المكون

أولاً، قم بإعداد مكون React أساسي سيكون مسؤولاً عن جلب وتخزين البيانات.

import React, { useState, useEffect } from 'react';

const useCustomCache = (apiUrl) => {
  const [data, setData] = useState(null);
  const [cache, setCache] = useState({});

  useEffect(() => {
    if (cache[apiUrl]) {
      setData(cache[apiUrl]);
    } else {
      fetch(apiUrl)
        .then(response => response.json())
        .then(result => {
          setCache(prevCache => ({ ...prevCache, [apiUrl]: result }));
          setData(result);
        });
    }
  }, [apiUrl, cache]);

  return data;
};

export function App(props) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const data = useCustomCache(apiUrl);

  if (!data) return <div>جارٍ التحميل...</div>;

  return (
    <div className='App'>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

إدارة الحالة

يتم استخدام hook useState لإدارة كل من البيانات المخزنة والبيانات الحالية التي يتم جلبها. هذا يسمح للمكون بتحديد ما إذا كان ينبغي تقديم بيانات مخزنة أو إجراء استدعاء API جديد.

جلب وتخزين البيانات

يحتوي hook useEffect على المنطق للتحقق من المخزن قبل إجراء طلب شبكة. إذا تم العثور على البيانات في المخزن، يتم استخدامها مباشرة؛ وإلا، يتم إجراء طلب جلب، ويتم تخزين النتيجة في المخزن.

انتهاء صلاحية البيانات

للتعامل مع تشطيب المخزن، يمكنك تعيين وقت انتهاء (TTL) للبيانات المخزنة. وهذا يضمن أن البيانات يتم تجديدها بشكل دوري وتبقى محدثة.

import React, { useState, useEffect } from 'react';

const useCustomCache = (apiUrl, ttl = 60000) => {
  const [data, setData] = useState(null);
  const [cache, setCache] = useState({});

  useEffect(() => {
    const cachedData = cache[apiUrl];
    if (cachedData && (Date.now() - cachedData.timestamp < ttl)) {
      setData(cachedData.data);
    } else {
      fetch(apiUrl)
        .then(response => response.json())
        .then(result => {
          setCache(prevCache => ({ ...prevCache, [apiUrl]: { data: result, timestamp: Date.now() } }));
          setData(result);
        });
    }
  }, [apiUrl, cache, ttl]);

  return data;
};

export function App(props) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const data = useCustomCache(apiUrl);

  if (!data) return <div>جارٍ التحميل...</div>;

  return (
    <div className='App'>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

عيوب التخزين المخصص

بينما يوفر إنشاء مكون تخزين مخصص مرونة، فإنه يأتي أيضًا مع العديد من العيوب:

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

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

استخدام حزم NPM للتخزين

يمكن أن تبسط الاستفادة من حزم NPM تنفيذ التخزين في تطبيقات React بشكل كبير. إليك بعض الحزم الشائعة التي يمكن أن تساعدك في البدء:

axios-cache-adapter

axios-cache-adapter يدمج قدرات التخزين في axios، عميل HTTP الشهير.

التثبيت:

npm install axios axios-cache-adapter

الاستخدام:

// استيراد التبعيات
import axios from 'axios'
import { setupCache } from 'axios-cache-adapter'

// إنشاء نسخة من `axios-cache-adapter`
const cache = setupCache({
  maxAge: 15 * 60 * 1000
})

// إنشاء نسخة من `axios` مع تمرير `cache.adapter` الجديدة التي تم إنشاؤها
const api = axios.create({
  adapter: cache.adapter
})

// إرسال طلب GET إلى بعض واجهات REST
api({
  url: 'http://some-rest.api/url',
  method: 'get'
}).then(async (response) => {
  // افعل شيئًا رائعًا مع response.data \o/
  console.log('استجابة الطلب:', response)

  // التفاعل مع المخزن، انظر إلى واجهة برمجة التطبيقات لـ `localForage`.
  const length = await cache.store.length()

  console.log('طول مخزن التخزين:', length)
})

lru-cache

lru-cache ينفذ تخزينًا مبنيًا على استخدام الأقل مؤخرًا (LRU).

التثبيت:

npm install lru-cache

الاستخدام:

import LRU from 'lru-cache';

const cache = new LRU({ max: 100 }); // الحد الأقصى لعدد العناصر في التخزين

const fetchData = async (url) => {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const response = await fetch(url);
  const data = await response.json();
  cache.set(url, data);
  return data;
};

idb-keyval

idb-keyval يبسط تخزين أزواج القيمة المفتاحية في IndexedDB، واجهة برمجة التطبيقات المنخفضة المستوى للتخزين على جانب العميل.

التثبيت:

npm install idb-keyval

الاستخدام:

import { get, set } from 'idb-keyval';

const fetchData = async (url) => {
  const cachedData = await get(url);
  if (cachedData) {
    return cachedData;
  }
  const response = await fetch(url);
  const data = await response.json();
  await set(url, data);
  return data;
};

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

مقدمة إلى أدوات متقدمة لتخزين API

عند الحديث عن تخزين استجابات API في React، تقدم أدوات متقدمة مثل React Query و SWR حلولًا قوية وغنية بالميزات تتجاوز قدرات آليات التخزين المخصصة. تم تصميم هذه الأدوات لتبسيط إدارة الحالة، وتعزيز جلب البيانات، وضمان توافق البيانات، كل ذلك مع تقديم تجربة مطور سلسة.

استعلام TanStack

استعلام TanStack (المعروف سابقًا باسم React Query) هو مكتبة قوية لجلب البيانات في تطبيقات React تقوم بإخفاء تعقيدات إدارة البيانات من جانب الخادم. تحول React Query طريقة تعاملك مع حالة الخادم في تطبيقات React الخاصة بك. تقدم التخزين المدمج، والتحديثات الخلفية، ودعمًا جاهزًا للتعامل مع الأخطاء، مما يجعل من الأسهل إدارة منطق جلب البيانات دون الحاجة إلى التعامل يدويًا مع التخزين وتزامن الحالة.

فوائد مقارنة بالحلول المخصصة:

تبسيط إدارة الحالة:
تتعامل React Query مع تفاصيل التخزين وإدارة الحالة، مما يسمح للمطورين بالتركيز على منطق التطبيق. تقوم بإخفاء تعقيدات التخزين والإبطال وإعادة جلب البيانات، وتوفير واجهة برمجة تطبيقات نظيفة وبديهية.

التحديث التلقائي في الخلفية:
يمكن لـ React Query إعادة جلب البيانات تلقائيًا في الخلفية للحفاظ عليها محدثة. يضمن ذلك أن تطبيقك يعرض دائمًا أحدث البيانات دون الحاجة إلى تحفيزات تحديث يدوية.

التحديثات التفاؤلية:
مع التحديثات التفاؤلية، يمكن لـ React Query أن تعكس التغييرات على الفور في واجهة المستخدم قبل أن يؤكد الخادم التحديث. هذا يوفر تجربة مستخدم سلسة واستجابة، حيث يمكن للمستخدمين رؤية أفعالهم تنعكس على الفور.

مثال:

npm install react-query // تثبيت الحزمة

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://jsonplaceholder.typicode.com/users').then((res) =>
        res.json(),
      ),
  })
  console.log(data)

  if (isPending) return 'جارٍ التحميل...'

  if (error) return 'حدث خطأ: ' + error.message

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

الكود أعلاه مأخوذ من صفحة الوثائق الرسمية، ويشرح الطريقة الأساسية لجلب البيانات. كما ترى من الأكواد أعلاه، يجعل TanStack Query من السهل علينا جلب البيانات، وأيضًا تخزين تلك البيانات بسهولة.

SWR (قديم أثناء إعادة التحقق)

SWR، الذي طورته Vercel، هو مكتبة جلب بيانات شائعة أخرى لـ React تؤكد على البساطة والكفاءة. اسم "SWR" يعني "قديم أثناء إعادة التحقق"، وهي استراتيجية تخزين تقدم بيانات قديمة أثناء جلب بيانات جديدة في الخلفية.

SWR يوفر واجهة برمجة تطبيقات ذات طابع بديهي جدًا لجلب البيانات والتخزين. يضمن أن تطبيقك يعرض البيانات على الفور (البيانات القديمة) ثم يعيد التحقق من خلال جلب بيانات جديدة في الخلفية. توفر هذه الاستراتيجية توازنًا بين الأداء ونضارة البيانات.

فوائد مقارنة بالحلول المخصصة:

سهولة الاستخدام:
واجهة برمجة التطبيقات في SWR بسيطة وسهلة الاستخدام، مما يجعلها متاحة للمطورين من جميع مستويات المهارات. تدير جلب البيانات، والتخزين، والتزامن، والتعامل مع الأخطاء بتكوين أدنى.

توافق البيانات:
SWR يضمن أن بيانات تطبيقك دائمًا جديدة. يعيد التحقق تلقائيًا من البيانات في الخلفية، مما يوفر للمستخدمين المعلومات الأكثر حداثة دون الحاجة إلى تحديثات يدوية.

التعامل مع الأخطاء:
تجعل التعاملات المدمجة مع الأخطاء في SWR من السهل إدارة الأخطاء أثناء جلب البيانات. توفر الأدوات لعرض رسائل الأخطاء أو مكونات واجهة المستخدم الاحتياطية عند فشل جلب البيانات.

مثال:

npm install swr // تثبيت الحزمة

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default Example = () => {
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';
  const { data, error } = useSWR(apiUrl, fetcher);

  if (!data) return <div>جارٍ التحميل...</div>;
  if (error) return <div>حدث خطأ: {error.message}</div>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

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

العمل مع Apidog

Apidog يعزز أمان API من خلال توفير وثائق قوية، واختبارات آلية، ورصد في الوقت الحقيقي. يساعد Apidog أيضًا في الامتثال للمعايير الصناعية مثل GDPR و HIPAA، مما يضمن أن APIs الخاصة بك تحمي بيانات المستخدم بشكل فعال.

بالإضافة إلى ذلك، يدعم Apidog التعاون بين الفرق، مما يعزز بيئة تطوير موجهة نحو الأمان. من خلال دمج Apidog، يمكنك بناء APIs آمنة وقابلة للاعتماد ومتوافقة، تحمي بياناتك ومستخدميك من تهديدات الأمان المختلفة.

الخاتمة

تحسين أوقات استجابة API أمر حاسم لتعزيز أداء وتجربة المستخدم للتطبيقات الحديثة على الويب. يمكن أن يقلل تخزين استجابات API بشكل كبير من الحمل على الخادم ويحسن من سرعات استرجاع البيانات. بينما يوفر بناء مكونات تخزين مخصصة في React مرونة، يمكن أن تعزز أدوات متقدمة مثل React Query و SWR من تبسيط العملية وتوفير ميزات إضافية مثل التحديثات الخلفية التلقائية والتعامل مع الأخطاء.

علاوة على ذلك، يمكن أن تبسط استخدام حزم NPM مثل axios-cache-adapter، lru-cache، و idb-keyval تنفيذات التخزين وتقليل تعقيد إدارة البيانات المخزنة. لتوفير إدارة شاملة لـ API، تقدم أدوات مثل Apidog حلولًا قوية لتصميم API، واختبارها، ورصدها، مما يضمن الموثوقية والكفاءة طوال دورة تطوير البرمجيات.

من خلال دمج هذه الأدوات والاستراتيجيات، يمكن للمطورين إنشاء تطبيقات تستجيب وتؤدي بشكل جيد تقدم تجربة مستخدم سلسة.