Hvordan fungerer streaming SSR med Suspense i Next.js?

Question

Accepted Answer

**Streaming SSR** lar serveren sende HTML til nettleseren **i biter etter hvert som de er klare**, i stedet for å vente på at hele siden skal rendres. Langsomme deler blokkerer ikke raske deler — brukeren ser innhold progressivt. React `` definerer streaming-grensene. ## Problemet streaming løser Uten streaming, hvis en seksjon trenger en langsom databasespørring, **venter hele siden** på det før *noe* HTML sendes — brukeren stirrer på en blank skjerm. Streaming sender skallet og raskt innhold umiddelbart, og streamer deretter de langsomme delene når de er ferdig. ## Bruke Suspense til å streame ```tsx import { Suspense } from "react"; export default function Page() { return ( <>

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

Hvordan fungerer streaming SSR med Suspense i Next.js?

Problemet streaming løser

Bruke Suspense til å streame

loading.tsx er automatisk Suspense

Hvorfor streaming hjelper nøkkelmålingene

Hvorfor det betyr noe