Hur fungerar streaming SSR med Suspense i Next.js?

Question

Accepted Answer

**Streaming SSR** låter servern skicka HTML till webbläsaren **i delar när de är klara**, istället för att vänta på att hela sidan renderas. Långsamma delar blockerar inte snabba delar — användaren ser innehållet progressivt. React `` definierar streamingsgränserna. ## Problemet som streaming löser Utan streaming, om ett avsnitt behöver en långsam databasfråga, **väntar hela sidan** på den innan *någon* HTML skickas — användaren stirrar på en tom skärm. Streaming skickar skalet och snabbt innehål omedelbar, sedan streamas de långsamma delarna när de är klara. ## Använda Suspense för streaming ```tsx import { Suspense } from "react"; export default function Page() { return ( <>

{/* sent immediately */} }> {/* streams independently */} {/* an async Server Component */}

Hur fungerar streaming SSR med Suspense i Next.js?

Problemet som streaming löser

Använda Suspense för streaming

loading.tsx är automatisk Suspense

Varför streaming hjälper de viktigaste måtten

Varför det är viktigt