Angular Academy · درس

Hydration التدريجي باستخدام @defer

نفّذ Hydration لأجزاء الصفحة عند الطلب

Hydration التدريجي باستخدام @defer درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

تكلفة الترطيب الكامل

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

مبني على defer

يستخدم الترطيب التدريجي كتلة @defer مع مشغلات hydrate الخاصة. ويستمر الخادم في عرض المحتوى، لكن العميل لا يرطّبه إلا عند تفعيل أحد المشغلات.

@defer (hydrate on viewport) {
  <app-comments />
}

تفعيله

فعّله اختياريًا باستخدام withIncrementalHydration() في موفّر الترطيب. ويتيح ذلك مشغلات hydrate في القوالب.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

providers: [provideClientHydration(withIncrementalHydration())]

hydrate on viewport

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

@defer (hydrate on viewport) {
  <app-related-products />
}

hydrate on interaction

يُرطّب الجزء عند تفاعل المستخدم معه (بالنقر أو keydown). وهذا مناسب جدًا للأدوات الظاهرة لكن قليلة الاستخدام، مثل لوحة قابلة للتوسيع.

@defer (hydrate on interaction) {
  <app-share-menu />
}

hydrate on idle and timer

استخدم hydrate on idle للترطيب عندما يكون المتصفح متاحًا، أو hydrate on timer(2s) للترطيب بعد تأخير. يناسب ذلك المناطق غير المهمة.

@defer (hydrate on idle) {
  <app-newsletter />
}

hydrate never

تحافظ hydrate never على HTML الذي أنشأه الخادم ثابتًا: إذ تعرضه، لكنها لا ترسل JavaScript لهذه الكتلة مطلقًا. وهي مثالية للمحتوى العرضي البحت وغير التفاعلي.

@defer (hydrate never) {
  <app-footer-links />
}

الفرق عن defer العادي

تعرض كتلة @defer العادية عنصرًا نائبًا حتى يتم تحميلها في سياق CSR. أما مع الترطيب التدريجي، فيكون المحتوى قد عُرض من الخادم وظهر بالفعل؛ ولا يتحكم المشغل إلا في وقت بدء التفاعلية (الترطيب).

دمج المشغلات

يمكنك دمج المشغلات بحيث تُرطّب الكتلة عند حدوث أيٍّ منها أولًا، لتحقيق توازن بين الجاهزية وتوفير الموارد.

@defer (hydrate on viewport; hydrate on interaction) {
  <app-map />
}

JavaScript أولي أصغر

يؤدي تأجيل ترطيب المكوّنات الثقيلة أو الموجودة أسفل الجزء المرئي إلى تقليل JavaScript الأولي اللازم للتفاعلية، وتحسين زمن الوصول إلى التفاعلية وINP في المسار الحرج.

اختيار المشغلات بحكمة

رطّب العناصر التفاعلية الظاهرة في الجزء الأولي استباقيًا أو عند الخمول؛ وأجّل الأدوات الموجودة أسفل الجزء المرئي والنادرة الاستخدام إلى viewport أو interaction. أجرِ القياسات للتأكد من المكاسب.

تحقق سريع

تحقق من معرفتك بالترطيب التدريجي.

مراجعة

استخدمت @defer (hydrate ...) مع withIncrementalHydration() للترطيب عند ظهور الجزء في إطار العرض، أو عند التفاعل، أو عند الخمول، أو بعد مؤقت، أو مطلقًا. ويقلل ذلك JavaScript الأولي ويحسّن التفاعلية عبر تأجيل ترطيب الكتل الموجودة أسفل الجزء المرئي والنادرة الاستخدام.

الأسئلة الشائعة

هل درس «Hydration التدريجي باستخدام @defer» مجاني؟

نعم — نص درس «Hydration التدريجي باستخدام @defer» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «Hydration التدريجي باستخدام @defer»؟

نفّذ Hydration لأجزاء الصفحة عند الطلب تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «Hydration التدريجي باستخدام @defer»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy