Streaming SSR يسمح للخادم بإرسال HTML إلى المتصفح على دفعات جاهزة، بدلاً من انتظار تصيير الصفحة بالكامل. الأجزاء البطيئة لا تحجب الأجزاء السريعة — يرى المستخدم المحتوى بشكل تدريجي. React <Suspense> يحدد حدود الـ streaming.
بدون streaming، إذا احتاجت أي قسم إلى استعلام قاعدة بيانات بطيء، فإن تنتظر ذلك قبل إرسال أي HTML — يحدق المستخدم في شاشة فارغة. Streaming يرسل الهيكل والمحتوى السريع فوراً، ثم يقوم بـ streaming الأجزاء البطيئة عند انتهاؤها.
import { Suspense } from "react";
export default function Page() {
return (
<>
<Header /> {/* sent immediately */}
<Suspense fallback={<Skeleton />}> {/* streams independently */}
<SlowProductList /> {/* an async Server Component */}
</Suspense>
<Footer /> {/* sent immediately */}
</>
);
}
async function SlowProductList() {
const products = await getProducts(); // takes 2s — doesn't block the rest
return <List products={products} />;
}
رأس الصفحة والتذييل والهيكل العظمي يصلون فوراً؛ عندما يتم حل getProducts()، يقوم React بـ streaming قائمة المنتجات ويستبدل الهيكل العظمي — كل ذلك في استجابة واحدة مستمرة.
// app/dashboard/loading.tsx → Next wraps the whole page in <Suspense> with this fallback
export default function Loading() { return <Spinner />; }
ملف loading.tsx هو سكر نحوي لتغليف الطريق في Suspense — الطريقة الأبسط لـ streaming جزء كامل.
TTFB (Time To First Byte) ↓ — server sends the shell right away
FCP (First Contentful Paint) ↓ — visible content appears sooner
User perceives the page as fast even if some data is slow
تحصل أيضاً على selective hydration — يمكن لـ React أن يقوم بـ hydrate الأجزاء التفاعلية أثناء streaming، بدلاً من انتظار كل شيء.
Streaming SSR يزيل مشكلة "استعلام بطيء واحد يحجب الصفحة بأكملها" المتأصلة في SSR التقليدي.
بتغليف الأقسام البطيئة المعتمدة على البيانات في <Suspense> (أو استخدام loading.tsx)، تقوم بشحن الهيكل السريع فوراً وـ streaming الباقي — مما يحسن TTFB/FCP والأداء المتصورة.
إنها قدرة محددة لمعمارية App Router's Server Components + React 18.