التحسين التدريجي باستخدام Server Actions

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

يعمل النموذج الذي يحتوي على action={serverAction} كطلب POST لصفحة HTML كاملة حتى من دون JavaScript. يرسل المتصفح النموذج، وينفّذ الخادم الإجراء، ثم يعيد صفحة HTML محدّثة. هذه هي الآلية نفسها التي شغّلت نماذج الويب منذ عام 1995، وتتوافق معها Server Actions في React حسب التصميم.

عند غياب JavaScript، يجب إجراء التحقق على الخادم. يتحقق Server Action من بيانات النموذج، وإذا فشل التحقق فإنه يعيد حالة الخطأ. يعيد الخادم تصيير الصفحة مع تضمين رسائل الخطأ في HTML. وهكذا يرى المستخدم الأخطاء من دون تشغيل أي JavaScript على جهة العميل.

عندما ينفّذ React عملية Hydration للصفحة، فإنه يعترض عمليات إرسال النموذج ويتعامل معها على أنها استدعاءات غير متزامنة لـ Server Action بدلًا من طلبات POST لصفحة كاملة. ويحصل المستخدم على تحديث داخل الصفحة من دون إعادة تحميلها، مع ظهور حالة الانتظار وواجهة مستخدم متفائلة، وكل ذلك من دون تغيير بنية الإجراء أو النموذج الأساسية.

يعرض الخادم النموذج مع تضمين الحالة الأولية في HTML. وعندما ينفّذ React عملية Hydration، فإنه يستخدم تلك الحالة الأولية من دون التسبب في أي وميض أو عدم تطابق. صُمّم الخطاف useActionState للتوفيق بسلاسة بين الحالة الأولية المصيّرة على الخادم وعملية Hydration على العميل.

تتيح انتقالات React بقاء واجهة المستخدم تفاعلية أثناء استدعاء Server Action. ويعني تغليف إرسال النموذج داخل انتقال أن بإمكان React منح رحلة الاتصال إلى الخادم أولوية أقل، مع إبقاء الصفحة سريعة الاستجابة. وهذا ما يجعل التجربة المحسّنة باستخدام JavaScript تبدو أسرع بكثير من إعادة تحميل الصفحة كاملة.

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

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

تعمل قارئات الشاشة والتقنيات المساعدة بأفضل صورة مع HTML الدلالي. ويستخدم النموذج المحسّن تدريجيًا عناصر <form> و<input> و<button> حقيقية، تفهمها التقنيات المساعدة تلقائيًا. وتضيف JavaScript مناطق ARIA الحية للإعلان عن الأخطاء، فتُحسّن الأساس المتاح بدلًا من استبداله.

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

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

ما المبدأ الأساسي للتحسين التدريجي؟

يعني التحسين التدريجي أن النموذج يعمل كطلب POST عادي لـ HTML من دون JavaScript. وتدعم Server Actions ذلك أصلاً؛ إذ يتيح action={serverAction} إرسال طلب POST لصفحة كاملة. ثم تعمل Hydration في React على ترقية النموذج إلى تحديثات غير متزامنة داخل الصفحة مع حالات انتظار. ويفيد هذا الأسلوب إمكانية الوصول وتحسين محركات البحث والمستخدمين ذوي الاتصال الضعيف، مع الاستمرار في تقديم تجربة غنية باستخدام JavaScript.