حدود Suspense وأولوية البث

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

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

عندما يبث React هيكل الصفحة، تُعرض أي حدود Suspense لا تتوفر بياناتها بعد باستخدام واجهتها البديلة، والتي تكون عادةً هيكلًا تخطيطيًا للتحميل أو مؤشر تحميل. تُضمَّن هذه الواجهة البديلة في استجابة HTML الأولية، لذلك يرى المستخدم مؤشر التحميل فورًا بدلًا من مساحة فارغة.

عند اكتمال بيانات أحد حدود Suspense، يبث React كود HTML المكتمل مع نص برمجي صغير مضمن. ينقل ذلك النص البرمجي المحتوى المبثوث حديثًا من عنصر قالب مخفي إلى الموضع الصحيح في DOM، ويستبدل الواجهة البديلة من دون إعادة تحميل الصفحة بالكامل.

يستخدم React نمط عنصر template في HTML: إذ يُبث محتوى Suspense المكتمل إلى قالب مخفي، ثم يستدعي نص برمجي دالة داخلية في React لنقل محتوى القالب إلى الموضع الصحيح في DOM. يتيح ذلك معالجة DOM اللازمة للاستبدال من دون الحاجة إلى JavaScript خاص بإطار العمل.

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

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

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

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

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

في علامة التبويب Network ضمن Chrome DevTools، فعّل "Preserve log" وراقب بث الاستجابة: ستلاحظ نمو مستند HTML على شكل أجزاء. تعرض علامة التبويب Performance مؤشري FCP وLCP؛ فقارن بين إصدارات تستخدم البث وأخرى لا تستخدمه لقياس مقدار التحسن. اضبط الشبكة على Fast 3G لتوضيح الأثر بشكل أكبر.

ماذا يحدث للواجهة البديلة لحد Suspense في استجابة HTML الأولية المبثوثة؟

تقسم حدود Suspense شجرة React إلى أقسام يمكن بثها بشكل مستقل. يُبث الهيكل، أي ما يقع خارج Suspense، أولًا؛ وتظهر الواجهات البديلة فورًا للحدود المعلّقة؛ ثم يستبدل المحتوى المكتمل الواجهات البديلة عبر نصوص برمجية مضمنة. تملك الحدود المتداخلة جداول زمنية مستقلة. ضع الحدود على مستوى الأقسام لتحقيق أفضل دقة للبث، ودع نظام الأولوية في React يتولى ترتيب hydration الناتج عن التفاعل.