React Suspense: دليل شامل لجلب البيانات وتقسيم الشفرة

تُعد React Suspense ميزة قوية تم تقديمها في React 16.6 تتيح لك "تعليق" عرض المكونات أثناء انتظار شيء ما، مثل تحميل البيانات أو تنزيل الشفرة. يوفر هذا طريقة إعلانية لإدارة حالات التحميل وتحسين تجربة المستخدم عن طريق التعامل الرشيق مع العمليات غير المتزامنة. سيرشدك هذا الدليل عبر مفاهيم Suspense وحالات استخدامها وأمثلة عملية لكيفية تطبيقها في تطبيقات React الخاصة بك.

ما هي React Suspense؟

Suspense هو مكون React يغلف مكونات أخرى ويسمح لك بعرض واجهة مستخدم بديلة (مثل مؤشر تحميل) أثناء انتظار تلك المكونات لحل Promise. يمكن أن يكون هذا Promise متعلقًا بما يلي:

• جلب البيانات: انتظار استرداد البيانات من واجهة برمجة تطبيقات (API).
• تقسيم الشفرة: انتظار تنزيل وتحليل وحدات JavaScript.

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

المفاهيم الأساسية

• مكون Suspense: المكون <Suspense> نفسه. يقبل خاصية fallback، التي تحدد واجهة المستخدم المراد عرضها أثناء تعليق المكونات المغلفة.
• React.lazy(): دالة تتيح تقسيم الشفرة عن طريق استيراد المكونات ديناميكيًا. تُعيد Promise الذي يتم حله عند تحميل المكون.
• تكامل Promise: تتكامل Suspense بسلاسة مع الـ Promises. عندما يحاول مكون عرض بيانات من Promise لم يتم حله بعد، فإنه "يتوقف" ويعرض واجهة المستخدم البديلة.

حالات الاستخدام

1. جلب البيانات باستخدام Suspense

أحد الاستخدامات الأساسية لـ Suspense هو إدارة جلب البيانات. بدلاً من إدارة حالات التحميل يدويًا باستخدام العرض الشرطي، يمكنك استخدام Suspense لعرض مؤشر تحميل بشكل إعلاني أثناء انتظار وصول البيانات.

مثال: جلب بيانات المستخدم من واجهة برمجة تطبيقات (API)

لنفترض أن لديك مكونًا يعرض بيانات المستخدم التي تم جلبها من واجهة برمجة تطبيقات (API). بدون Suspense، قد يكون لديك شفرة مثل هذه:

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

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

تعمل هذه الشفرة، لكنها تتضمن إدارة متغيرات حالة متعددة (isLoading، error، user) ومنطق العرض الشرطي. باستخدام Suspense، يمكنك تبسيط ذلك باستخدام مكتبة جلب بيانات مثل SWR أو TanStack Query (المعروفة سابقًا باسم React Query) والمصممة للعمل بسلاسة مع Suspense.

إليك كيفية استخدام SWR مع Suspense:

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Loading user data...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

في هذا المثال:

• نستخدم useSWR لجلب بيانات المستخدم. يخبر الخيار suspense: true مكتبة SWR برمي Promise إذا كانت البيانات غير متوفرة بعد.
• لا يحتاج مكون UserProfile إلى إدارة حالات التحميل أو الخطأ بشكل صريح. إنه يعرض ببساطة بيانات المستخدم عندما تكون متاحة.
• يُلتقط مكون <Suspense> الـ Promise الذي تم رميه بواسطة SWR ويعرض واجهة المستخدم البديلة (<p>Loading user data...</p>) أثناء جلب البيانات.

يبسط هذا النهج منطق المكون الخاص بك ويجعل التفكير في جلب البيانات أسهل.

اعتبارات عالمية لجلب البيانات:

عند بناء تطبيقات لجمهور عالمي، ضع في اعتبارك ما يلي:

• تأخير الشبكة (Network Latency): قد يواجه المستخدمون في مواقع جغرافية مختلفة تأخيرات متفاوتة في الشبكة. يمكن لـ Suspense أن تساعد في توفير تجربة مستخدم أفضل من خلال عرض مؤشرات التحميل أثناء جلب البيانات من الخوادم البعيدة. فكر في استخدام شبكة توصيل المحتوى (CDN) لتخزين بياناتك مؤقتًا بالقرب من المستخدمين.
• توطين البيانات (Data Localization): تأكد من أن واجهة برمجة التطبيقات (API) الخاصة بك تدعم توطين البيانات، مما يتيح لك تقديم البيانات باللغة والتنسيق المفضلين للمستخدم.
• توفر واجهة برمجة التطبيقات (API Availability): راقب توفر وأداء واجهات برمجة التطبيقات الخاصة بك من مناطق مختلفة لضمان تجربة مستخدم متسقة.

2. تقسيم الشفرة باستخدام React.lazy() و Suspense

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

توفر React الدالة React.lazy() لتقسيم مكونات الشفرة. عند استخدامها مع Suspense، فإنها تسمح لك بعرض واجهة مستخدم بديلة أثناء انتظار تنزيل المكون وتحليله.

مثال: التحميل البطيء لمكون

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

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

في هذا المثال:

• نستخدم React.lazy() لاستيراد المكون OtherComponent ديناميكيًا. يُعيد هذا Promise الذي يتم حله عند تحميل المكون.
• نغلف <OtherComponent /> بـ <Suspense> ونوفر خاصية fallback.
• أثناء تحميل OtherComponent، سيتم عرض واجهة المستخدم البديلة (<p>Loading...</p>). بمجرد تحميل المكون، سيحل محل واجهة المستخدم البديلة.

فوائد تقسيم الشفرة:

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

تقنيات تقسيم الشفرة المتقدمة:

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

3. الوضع المتزامن (Concurrent Mode) و Suspense

تُعد Suspense مكونًا أساسيًا لوضع React المتزامن (Concurrent Mode)، وهي مجموعة من الميزات الجديدة التي تُمكّن React من العمل على مهام متعددة بشكل متزامن. يسمح الوضع المتزامن لـ React بتحديد أولويات التحديثات المهمة، ومقاطعة المهام طويلة الأمد، وتحسين استجابة تطبيقك.

مع الوضع المتزامن و Suspense، يمكن لـ React أن:

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

لتمكين الوضع المتزامن (Concurrent Mode)، يمكنك استخدام واجهة برمجة تطبيقات createRoot في React 18:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

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

• استخدم مكتبة لجلب البيانات: فكر في استخدام مكتبة لجلب البيانات مثل SWR أو TanStack Query، المصممة للعمل بسلاسة مع Suspense. توفر هذه المكتبات ميزات مثل التخزين المؤقت، وإعادة المحاولة التلقائية، ومعالجة الأخطاء، مما يمكن أن يبسط منطق جلب البيانات الخاص بك.
• توفير واجهة مستخدم بديلة ذات معنى: يجب أن توفر واجهة المستخدم البديلة مؤشرًا واضحًا على أن شيئًا ما يتم تحميله. استخدم مؤشرات التحميل، أو أشرطة التقدم، أو رسوم التحميل الهيكلية لإنشاء تجربة تحميل جذابة بصريًا وغنية بالمعلومات.
• معالجة الأخطاء برشاقة: استخدم Error Boundaries لالتقاط الأخطاء التي تحدث أثناء العرض. يمكن أن يمنع هذا تطبيقك بالكامل من الانهيار ويوفر تجربة مستخدم أفضل.
• تحسين تقسيم الشفرة: استخدم تقسيم الشفرة بشكل استراتيجي لتقليل وقت التحميل الأولي لتطبيقك. حدد المكونات الكبيرة أو غير المستخدمة بشكل متكرر وقسّمها إلى أجزاء منفصلة.
• اختبر تطبيق Suspense الخاص بك: اختبر تطبيق Suspense الخاص بك بدقة للتأكد من أنه يعمل بشكل صحيح وأن تطبيقك يتعامل مع حالات التحميل والأخطاء برشاقة.

معالجة الأخطاء باستخدام Error Boundaries

بينما تتعامل Suspense مع حالة *التحميل*، تتعامل Error Boundaries مع حالة *الخطأ* أثناء العرض. Error Boundaries هي مكونات React تلتقط أخطاء JavaScript في أي مكان في شجرة مكوناتها الفرعية، وتسجل تلك الأخطاء، وتعرض واجهة مستخدم بديلة بدلاً من انهيار شجرة المكونات بأكملها.

إليك مثال أساسي على Error Boundary:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

لاستخدام Error Boundary، قم بتغليف المكون الذي قد يرمي خطأ به:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

من خلال الجمع بين Suspense و Error Boundaries، يمكنك إنشاء تطبيق قوي ومرن يتعامل مع كل من حالات التحميل والأخطاء برشاقة.

أمثلة واقعية

إليك بعض الأمثلة الواقعية لكيفية استخدام Suspense لتحسين تجربة المستخدم:

• موقع التجارة الإلكترونية: استخدم Suspense لعرض مؤشرات التحميل أثناء جلب تفاصيل المنتج أو الصور. يمكن أن يمنع هذا المستخدم من رؤية صفحة فارغة أثناء انتظار تحميل البيانات.
• منصة التواصل الاجتماعي: استخدم Suspense للتحميل البطيء للتعليقات أو المنشورات بينما يقوم المستخدم بالتمرير لأسفل الصفحة. يمكن أن يحسن هذا وقت التحميل الأولي للصفحة ويقلل من كمية البيانات التي يجب تنزيلها.
• تطبيق لوحة المعلومات (Dashboard Application): استخدم Suspense لعرض مؤشرات التحميل أثناء جلب البيانات للرسوم البيانية أو المخططات. يمكن أن يوفر هذا تجربة مستخدم أكثر سلاسة واستجابة.

مثال: منصة تجارة إلكترونية دولية

لنتأمل منصة تجارة إلكترونية دولية تبيع المنتجات عالميًا. يمكن للمنصة الاستفادة من Suspense و React.lazy() من أجل:

• التحميل البطيء لصور المنتجات: استخدم React.lazy() لتحميل صور المنتجات فقط عندما تكون مرئية في إطار العرض. يمكن أن يقلل هذا بشكل كبير من وقت التحميل الأولي لصفحة قائمة المنتجات. قم بتغليف كل صورة يتم تحميلها ببطء بـ <Suspense fallback={<img src="placeholder.png" alt="جار التحميل..." />}> لعرض صورة مؤقتة بينما يتم تحميل الصورة الفعلية.
• تقسيم الشفرة للمكونات الخاصة بالبلد: إذا كانت المنصة تحتوي على مكونات خاصة ببلد معين (مثل تنسيق العملة، حقول إدخال العنوان)، استخدم React.lazy() لتحميل هذه المكونات فقط عندما يحدد المستخدم بلدًا معينًا.
• جلب أوصاف المنتجات المترجمة: استخدم مكتبة جلب بيانات مثل SWR مع Suspense لجلب أوصاف المنتجات باللغة المفضلة للمستخدم. اعرض مؤشر تحميل بينما يتم جلب الأوصاف المترجمة.

الخاتمة

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

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

مزيد من التعلم

• وثائق React Suspense
• وثائق SWR
• وثائق TanStack Query
• إعلان React 18 (الوضع المتزامن)