مزامنة الخلفية ونمط التعطل أثناء إعادة التحقق

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

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

المشكلة الأساسية لا تكمن في جلب البيانات، بل في ربط عملية العرض بتحديثها. نادرًا ما تحتوي الأنظمة الواقعية على بيانات محدثة تمامًا طوال الوقت، ومع ذلك، لا يزال المستخدمون بحاجة إلى استمرارية العرض. يعالج React 19 هذا التناقض من خلال إدراك حقيقة بسيطة: غالبًا ما تأتي واجهة المستخدم المفيدة من بيانات قديمة بعض الشيء . فبدلًا من إجبار الشاشة على الانتظار، يوفر React أدوات للعرض الفوري، والحفاظ على استقرار واجهة المستخدم، وتحسين صحتها تدريجيًا من خلال المزامنة في الخلفية. يُضفي نمط "stale-while-revalidate" طابعًا رسميًا على هذا النهج ويُواءمه مع نموذج العرض المتزامن في React.

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

حافظ على واجهة المستخدم ثابتة أثناء تحديث البيانات

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

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

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

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

والآن دعونا ننتقل من النموذج الذهني إلى تطبيق يثبت ذلك: سنقوم بالعرض فورًا باستخدام البيانات المخزنة مؤقتًا، ثم نعيد التحقق في الخلفية دون انهيار واجهة المستخدم إلى حالة التحميل.

مثال: عرض فوري مع إعادة التحقق في الخلفية

يقوم هذا المثال بإنشاء لوحة ...