الترطيب وحدود العميل في مركز خدمات إعادة التأهيل

في تطبيقات React ، كان يُنظر إلى عملية الترطيب كخطوة ثانية ضرورية بعد عرض خادم . يقوم خادم بإنشاء HTML لتحسين عملية العرض الأولية، ثم يتولى عميل ، حيث يقوم بربط معالجات الأحداث، وتهيئة الحالة، وإعداد شجرة المكونات بالكامل للتفاعل. من النظرة الأولى، يبدو هذا منطقيًا: عرض سريع، ثم جعله تفاعليًا.

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

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

تُغيّر مكونات خادم React الوضع الافتراضي جذريًا، إذ تسمح ببقاء معظم واجهة المستخدم مُعرَضة من جانب الخادم دون إعادة تحميلها. لكن هذا يُثير مشكلة تنسيق جديدة: كيف يُمكن React إعادة التفاعلية بشكل آمن ومتوقع دون فقدان مزايا العرض من خادم ؟ يُعالج React 19 هذه المشكلة بجعل حدود عميل واضحة وتحويل إعادة التحميل إلى عملية تفعيل اختيارية.

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

من "ترطيب كل شيء" إلى "تفعيل ما هو مطلوب فقط"

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

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

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

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

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