فهم مسار معالجة الصور في RSC

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

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

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

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

العرض القائم على الأهلية والبث التدريجي

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

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

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

مع اكتمال معالجة المناطق المعلقة، يقوم React بإرسال إخراج إلى عميل تدريجيًا. يتلقى عميل واجهة مستخدم تتشكل تدريجيًا، وليس حمولة واحدة كاملة أو لا شيء. من المهم إدراك أن React 19 لا يرسل HTML خلال هذه العملية؛ بل يرسل حمولة RSC مُسلسلة. تحتوي هذه حمولة على تعليمات بنية الشجرة. يستقبل وقت تشغيل React من جانب العميل هذه التعليمات.chunks ويعيد بناء نموذج كائن المستند (DOM) تدريجيًا. لهذا السبب يمكنك رؤيةFrame على الفور، حتى لو كانActivity لا تزال البيانات 1.5 ثوانٍ معدودة.

تأتي التفاعلية لاحقًا من خلال ترطيب مكون العميل، والذي يعتمد على توفر ...