كيف يعمل `Suspense` و `React.lazy` لتقسيم الأكواد؟

Question

Accepted Answer

**`React.lazy`** يحمل حزمة JavaScript الخاصة بالمكون **عند الطلب** (فقط عند أول عرض). **`Suspense`** يعرض واجهة مستخدم بديلة بينما أي مكون lazy (أو موقوف بيانات) لا يزال في حالة التحميل. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## لماذا هذا مهم: تحميل أولي أصغر بدون تقسيم الأكواد، يقوم المتصفح بتحميل **التطبيق بالكامل** (بما في ذلك مكتبة الرسوم البيانية الثقيلة) قبل عرض أي شيء. مع `lazy`، يتم تقسيم كود `Chart` إلى ملفه الخاص ويتم جلبه فقط عندما يصل المستخدم إليه بالفعل — مما يحسن وقت التحميل الأولي و Core Web Vitals. ## كيف ينسق Suspense عندما يتوقف `Chart` (حزمته غير جاهزة)، يقوم React بـ "إيقاف" هذا الجزء من الشجرة وعرض أقرب fallback لـ `Suspense` بدلاً من ذلك، ثم يستبدل بالمكون الفعلي بمجرد تحميله. يمكن لحد واحد أن يغلف عدة مكونات lazy ويعرض fallback واحد: ```jsx }>

``` ## بعيداً عن تقسيم الأكواد ينسق Suspense أيضاً **تحميل البيانات** مع الأطر والمكتبات التي "تتوقف" على جلب معلق، ويقترن بـ **streaming SSR** (Next.js App Router) لإرسال shell سريع وبث الأجزاء الأبطأ. ضع الحدود بحكمة لتجنب التحولات الكبيرة والمزعجة في التخطيط عند ظهور المحتوى.