Angular Academy · درس

تمكين Hydration الكامل

فعّل Hydration لتجنّب إعادة العرض

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

تفعيل الترطيب

يتم تفعيل الترطيب الكامل بإضافة provideClientHydration() إلى موفّري التطبيق. ويضيف مخطط ng add @angular/ssr ذلك نيابةً عنك.

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

export const appConfig = {
  providers: [provideClientHydration()]
};

موضعه

ينبغي وضعه في موفّري appConfig الخاص بالمتصفح، وهو الإعداد نفسه المستخدم لبدء تشغيل العميل. ويُدمج إعداد الخادم فوقه باستخدام provideServerRendering().

ماذا يعني كامل

يعمل الترطيب الكامل (الاستباقي) على ترطيب شجرة المكوّنات بأكملها فور تحميل JavaScript وبدء تشغيل Angular. ويصبح كل مكوّن تفاعليًا في الوقت نفسه.

إعادة تشغيل الأحداث

فعّل withEventReplay() حتى تُلتقط تفاعلات المستخدم التي تحدث قبل اكتمال الترطيب وتُعاد بعده، مما يمنع فقدان النقرات على الأجهزة البطيئة.

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

providers: [provideClientHydration(withEventReplay())]

ذاكرة التخزين المؤقت لنقل HTTP

عند تفعيل الترطيب، تُخزَّن استجابات طلبات GET الصادرة من الخادم عبر HttpClient في TransferState افتراضيًا، لذلك لا يعيد العميل طلب البيانات نفسها بعد بدء التشغيل.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

التحقق من الترطيب

افتح وحدة التحكم في وضع التطوير. يسجّل Angular إحصاءات الترطيب (المكوّنات التي رُطّبت، والعُقد التي أُعيد استخدامها). ويعني عدم ظهور تحذيرات عدم التطابق أن الترطيب نجح بصورة سليمة.

// Angular hydrated 24 component(s) and 187 node(s)

إصلاح حالات عدم التطابق

إذا ظهرت أخطاء عدم التطابق NG0500، فابحث عن القوالب غير الحتمية أو تعديلات DOM اليدوية. اجعل الترميز حتميًا حتى تتطابق مخرجات الخادم والعميل.

حماية واجهات برمجة تطبيقات المتصفح

يمكن أن تغيّر التعليمات البرمجية التي تتعامل مع window أو localStorage أثناء العرض الأولي الترميز بين الخادم والعميل. استخدم isPlatformBrowser للحماية، أو شغّلها بعد تهيئة العرض.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

مقايضة الترطيب الكامل

الترطيب الكامل بسيط، لكنه ينزّل JavaScript لجميع المكوّنات وينفّذه مسبقًا. وقد يؤخر ذلك التفاعلية في التطبيقات الكبيرة، وهو ما يعالجه الترطيب التدريجي.

i18n والترطيب

يعمل الترطيب مع i18n في Angular، لكن احرص على أن يكون المحتوى المترجم حتميًا. يؤدي اختلاف اللغات المحلية بين الخادم والعميل إلى أخطاء الترطيب.

تحقق الإنتاج

قبل النشر، أنشئ التطبيق للإنتاج، وقدّم مخرجات SSR، وتحقق في الشبكة ووحدة التحكم من تشغيل الترطيب دون حالات عدم تطابق، ومن أن ذاكرة النقل المؤقتة تمنع تكرار جلب البيانات.

تحقق سريع

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

مراجعة

فعّلت الترطيب الكامل باستخدام provideClientHydration()، وأضفت withEventReplay() للنقرات التي تسبق الترطيب، واعتمدت على ذاكرة التخزين المؤقت لنقل HTTP، وحميت واجهات برمجة تطبيقات المتصفح، وتحققت من سلامة الترطيب. الترطيب الكامل بسيط، لكنه يحمّل JavaScript بالكامل مسبقًا.

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

هل درس «تمكين Hydration الكامل» مجاني؟

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

ماذا ستتعلم في «تمكين Hydration الكامل»؟

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

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

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

كم من الوقت يستغرق درس «تمكين Hydration الكامل»؟

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

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

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

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

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