بث SSR من الحافة

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

يخبر تمرير bootstrapScripts إلى renderToReadableStream React بمكان حزمة JavaScript من جهة العميل. وتُدخل React وسم script في نهاية الدفق، لكي يحمّل المتصفح الحزمة ويستدعي hydrateRoot، فتصبح الصفحة تفاعلية مع اكتمال بث كل قسم.

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

يُستدعى onShellReady عندما يصبح هيكل HTML غير المعلّق، أي كل ما يقع خارج حدود Suspense، جاهزًا للبث. وهذه هي اللحظة الصحيحة لتعيين رمز حالة HTTP وترويسات الاستجابة، ثم استدعاء pipe(res) أو بدء القراءة من ReadableStream.

يجب إرسال رموز حالة HTTP والترويسات قبل بدء جسم الاستجابة. وبما أن البث يبدأ مع onShellReady، فيجب تنفيذ أي منطق لمعالجة الأخطاء، مثل تعيين الحالة 500 أو إجراء إعادة توجيه، قبل بدء تدفق الهيكل؛ إذ يصبح رمز الحالة ثابتًا بمجرد بدء البث.

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

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

إذا استغرقت بيانات حدّ Suspense وقتًا طويلًا، فابثّ الهيكل على أي حال، ودَع الحدّ يخضع لعملية hydration على العميل. نفّذ مهلة زمنية: بعد 5 ثوانٍ، استدعِ abort() على البث إذا لم يُحسم الحدّ، وعندها سيجلب العميل البيانات بنفسه عبر useEffect.

يمرّر وقت تشغيل Workers الـ ReadableStream مباشرةً بوصفه جسم Response. وتعيد بنية Cloudflare الأساسية توجيه كل جزء إلى متصفح المستخدم فور إنتاج React له، من دون تخزين المستند بأكمله مؤقتًا. وهذا يعني أن أول بايتات HTML تغادر نقطة PoP الطرفية خلال بضعة أجزاء من الألف من الثانية بعد وصول الطلب.

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

مع البث من الحافة، تبدو سلسلة زمن الاستجابة الكاملة كما يلي: 5ms (من الطلب إلى أقرب PoP) + 2ms (بدء Worker البارد) + 8ms (عرض الهيكل) = 15ms حتى أول بايت. ويعرض متصفح المستخدم عنصر LCP من الهيكل، بينما يواصل باقي الصفحة وصوله عبر البث في الخلفية.

متى تحديدًا يُستدعى ردّ النداء onShellReady أثناء SSR المتدفّق؟

يوصل SSR المتدفّق من الحافة HTML على أجزاء، مما يحسّن FCP وLCP عبر إرسال الهيكل فورًا. وتقسم حدود Suspense الشجرة إلى أقسام يمكن بثها بشكل مستقل. ويُعد onShellReady الإشارة إلى بدء تمرير البيانات — اضبط رموز الحالة قبل استدعائه. ويتولى onShellError معالجة الإخفاقات الفادحة، بينما يتولى onError معالجة الإخفاقات القابلة للاسترداد، ويمنع abort() إهدار العمل على الطلبات الملغاة.