Hvordan fungerer Streaming SSR med Suspense i Next.js?

Question

Accepted Answer

**Streaming SSR** lader serveren sende HTML til browseren **i chunks, efterhånden som det bliver klar**, i stedet for at vente på, at hele siden bliver rendereret. Langsomme dele blokerer ikke hurtige dele — brugeren ser indhold progressivt. React `` definerer streaming-grænserne. ## Problemet, som streaming løser Uden streaming, hvis ét afsnit har brug for en langsom databaseforespørgsel, **venter hele siden** på det, før *noget* HTML sendes — brugeren stirrer på en tom skærm. Streaming sender skallen og hurtigt indhold med det samme, derefter streamerer de langsomme dele, når de bliver færdige. ## Brug af Suspense til streaming ```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, som streaming løser

Brug af Suspense til streaming

loading.tsx er automatisk Suspense

Hvorfor streaming hjælper de vigtigste metrics

Hvorfor det betyder noget