التمهيد التدريجي مع التمهيد الانتقائي

يُعد hydration الانتقائي ميزة في React 18 تتيح لـ React بدء hydration للمكوّنات فور وصول كود JavaScript الخاص بها، من دون انتظار تنزيل JavaScript للصفحة بأكملها. ويُجري كل قسم مقسّم إلى حزم بشكل مستقل hydration عند تحميل حزمتها، بدلًا من إجراء ذلك لكل الأقسام دفعة واحدة.

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

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

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

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

يقلل hydration الانتقائي من Total Blocking Time (TBT)، وهو المقياس الأساسي لأداء hydration. في علامة التبويب Performance ضمن Chrome DevTools، تُبرز Long Tasks، أي المهام التي تتجاوز 50ms، باللون الأحمر. قبل استخدام hydration الانتقائي، قد ترى مهمة طويلة واحدة مدتها 300ms لإجراء hydration بالكامل؛ وبعده، سترى عدة مهام صغيرة موزعة على فترات زمنية.

النمط المضاد الذي يقوّض hydration الانتقائي هو استيراد جميع المكوّنات في أعلى تطبيقك، مثل: import Footer from './Footer'. فهذا يجبر المتصفح على تنزيل كود Footer وتحليله وتنفيذه قبل بدء أي hydration. استبدل الاستيرادات العلوية للمكوّنات الواقعة أسفل الصفحة باستخدام React.lazy والاستيرادات الديناميكية.

استخدم const Footer = React.lazy(() => import('./Footer')) للمكوّنات التي تظهر أسفل إطار العرض الأولي. غلّفها داخل Suspense مع واجهة بديلة بسيطة. وسيخفض المتصفح أولوية جلب حزمة Footer إلى أن يكتمل hydration للمحتوى الظاهر أعلى الصفحة، مما يحسّن TBT تلقائيًا.

يتكامل البث وhydration الانتقائي؛ إذ يرسل البث أجزاء HTML لتحسين FCP وLCP، بينما يعالج hydration الانتقائي أجزاء JavaScript لتحسين TTI وTBT. ويعالج الأسلوبان معًا بُعدي الأداء، وهما "عرض المحتوى بسرعة" و"جعله تفاعليًا بسرعة".

تدفع مكوّنات خادم React مفهوم hydration الانتقائي إلى أبعد من ذلك؛ إذ لا تنتج مكوّنات الخادم أي JavaScript للعميل على الإطلاق. وتحتاج مكوّنات العميل فقط، أي المعلّمة بـ "use client"، إلى hydration. ويقلل ذلك إجمالي كمية JavaScript التي تحتاج إلى hydration، مما يجعل hydration الانتقائي أكثر فعالية.

من الأنماط العملية استخدام renderToPipeableStream لبث HTML، وتغليف الصفحة باستدعاء hydrateRoot في الجذر، بدلًا من createRoot، لتمكين وضع hydration، واستخدام React.lazy لجميع الأقسام الواقعة أسفل الصفحة، وتغليف كل قسم داخل حد من حدود Suspense. ويتولى React بقية العمل تلقائيًا.

كيف يؤثر تفاعل المستخدم في أولوية hydration الانتقائي في React 18؟

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