ما هي Hydration

الإماهة هي العملية التي يعيد فيها تطبيق Angular من جانب العميل استخدام HTML الذي أنشأه الخادم، مع إرفاق مستمعات الأحداث والحالة بـ DOM الموجود بدلاً من التخلص منه وإعادة عرضه.

استخدم SSR القديم إماهة هدّامة: إذ كان العميل يمسح DOM الخاص بالخادم ويعيد العرض من البداية. تسبب ذلك في وميض مرئي وأهدر عمل الخادم.

ينفذ Angular الحديث إماهة غير هدّامة: إذ يتنقل عبر DOM الموجود، ويطابقه مع شجرة المكوّنات، ويعيد استخدام العقد. لا وميض، وعمل أقل، وأداء أفضل.

يعني إعادة استخدام HTML الخاص بالخادم بقاء أكبر محتوى معروضاً، مما يساعد LCP، كما تتجنب تغيرات التخطيط الناتجة عن إعادة العرض، مما يساعد CLS. ويصبح التطبيق تفاعلياً من دون إعادة الرسم.

المرحلة الأولى: يعرض الخادم HTML ويرسله. المرحلة الثانية: ينزّل المتصفح JavaScript، ويبدأ Angular، ويُجري إماهة للترميز الموجود كي يصبح تفاعلياً.

تفترض الإماهة أن شجرة مكوّنات العميل تنتج البنية نفسها التي أنتجها الخادم. وإذا اختلفتا، يُبلغ Angular عن عدم تطابق في الإماهة.

تسبب معالجة DOM مباشرة، وفروعاً خاصة بالمتصفح تغيّر الترميز، وتداخل HTML غير صالح، ومحتوى غير حتمي (مثل Math.random() أو Date.now() في القوالب) حالات عدم التطابق.

لا تعالج DOM بطريقة إجرائية (باستخدام innerHTML خارج Angular مثلاً) أثناء SSR. دع Angular يتولى DOM كي يتفق العميل والخادم.

بالنسبة إلى مكوّن لا يمكن إماهته فعلاً (مثل عنصر واجهة من جهة خارجية يغيّر DOM)، عطّل الإماهة له باستخدام ngSkipHydration؛ وسيعيد Angular عرض ذلك الفرع الفرعي فقط.

ينطبق الترطيب فقط عند وجود HTML مُولَّد على الخادم لإعادة استخدامه. لا تملك تطبيقات CSR الخالصة شيئًا لترطيبه؛ فالترطيب هو الجانب الخاص بالعميل من قصة SSR.

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

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

يعيد الترطيب استخدام HTML الذي أنشأه الخادم على العميل بطريقة غير هدّامة، مما يحسّن LCP وCLS. تنشأ حالات عدم التطابق بسبب تعديلات DOM اليدوية أو الترميز غير الحتمي؛ استخدم ngSkipHydration كحل استثنائي. الترطيب هو الجانب الخاص بالعميل من SSR.