Streaming SSR อนุญาตให้เซิร์ฟเวอร์ส่ง HTML ไปยังเบราว์เซอร์ เป็นชิ้น ๆ เมื่อพร้อม แทนที่จะรอให้เพจทั้งหมดแสดงผล ส่วนที่ช้าไม่บล็อกส่วนที่เร็ว — ผู้ใช้เห็นเนื้อหาแบบค่อย ๆ React <Suspense> กำหนดขอบเขตการสตรีม
หากไม่มีการสตรีม หากส่วนหนึ่งต้องการแบบสอบถามฐานข้อมูลที่ช้า จะรอให้ส่ง HTML — ผู้ใช้มองที่หน้าจอว่าง การสตรีมส่งเปลือกและเนื้อหาที่เร็วทันที จากนั้นจึงสตรีมส่วนที่ช้าเมื่อเสร็จสิ้น
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 จะสตรีมรายการผลิตภัณฑ์และแทนที่โครงกระดูก — ทั้งหมดในการตอบสนองอย่างต่อเนื่องเดียว
// app/dashboard/loading.tsx → Next wraps the whole page in <Suspense> with this fallback
export default function Loading() { return <Spinner />; }
ไฟล์ loading.tsx เป็นสิ่งที่ห่อหุ้มเส้นทางใน Suspense — วิธีที่ง่ายที่สุดในการสตรีมส่วนทั้งหมด
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
คุณยังได้รับ hydration ที่เลือกสรร — React สามารถ hydrate ส่วนโต้ตอบเมื่อพวกเขาสตรีมผ่าน แทนที่จะรอให้ทุกอย่างเสร็จสิ้น
Streaming SSR ช่วยแก้ปัญหา "แบบสอบถามช้าหนึ่งอันบล็อกเพจทั้งหมด" ที่มีอยู่ในการ SSR แบบดั้งเดิม
ด้วยการห่อส่วนที่ช้าและขึ้นอยู่กับข้อมูลใน <Suspense> (หรือใช้ loading.tsx) คุณส่งเปลือกที่เร็วทันทีและสตรีมส่วนที่เหลือ — ปรับปรุง TTFB/FCP และประสิทธิการที่รับรู้
นี่เป็นความสามารถที่กำหนดของสถาปัตยกรรม App Router's Server Components + React 18