ما هو الـ Streaming SSR وكيف يعمل مع دالة renderToPipeableStream في Node.js؟

الإجابة المختصرة

هو تقنية تتيح إرسال أجزاء الـ HTML المكتملة إلى المتصفح بشكل تدفقي متتابع عبر Streams دون انتظار اكتمال تحميل أثقل أجزاء الصفحة، مما يقلص زمن ظهور أول بايت وأول محتوى مرئي.

الشرح

باستخدام renderToPipeableStream في خوادم Node.js مقترناً بـ React Suspense، يقوم السيرفر بضخ هيكل الصفحة الأساسي فوراً للمتصفح مع شاشات انتظار (Fallbacks)، وعندما تكتمل استعلامات البيانات البطيئة في الخادم، يتم دفق محتوى الـ HTML النهائي مع سكربت صغير لإدراجه في موضعه دون إعادة تحميل.

مثال بالكود

// استخدام renderToPipeableStream على الخادم
import { renderToPipeableStream } from 'react-dom/server';

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/main.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // بدء بث الهيكل الأساسي فوراً
    },
    onError(error) {
      console.error(error);
    }
  });
});

أخطاء شائعة

• استخدام الدالة القديمة renderToString التي كانت تحبس الاستجابة وتمنع إرسال أي بايت حتى يكتمل تجهيز كامل شجرة المكونات.

أسئلة متابعة

• ما هي مكونات خادم ريأكت (React Server Components - RSC) وكيف تختلف جوهرياً عن SSR؟
• ما هي معضلة الـ Hydration وما هي مسببات الـ Hydration Mismatch الشهيرة؟

المصادر

• React docs — renderToPipeableStream