كيف يعمل Suspense لجلب البيانات (Data Fetching) وإدارة حالات التحميل المتداخلة؟

الإجابة المختصرة

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

الشرح

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

مثال بالكود

function Dashboard() {
  return (
    <div>
      <h1>لوحة التحكم</h1>
      <Suspense fallback={<MetricsSkeleton />}>
        <RealtimeMetrics />
      </Suspense>
      <Suspense fallback={<RecentOrdersSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  );
}

أخطاء شائعة

• تغليف الصفحة كاملة بـ Suspense واحد فقط، مما يؤدي لاختفاء كامل الصفحة وعرض سبينر مركزي كبير عند تأخر جزء فرعي بسيط.

أسئلة متابعة

• ما هي دالة use() الجديدة في React 19 وكيف تتعامل مع الـ Promises والـ Context؟
• ما هو الـ Streaming SSR وكيف يعمل مع دالة renderToPipeableStream في Node.js؟

المصادر

• React docs — Suspense