Hvordan fungerer Suspense og React.lazy for kodedeling?

Question

Accepted Answer

**`React.lazy`** laster en komponents JavaScript-bundle **on demand** (bare når den først rendres). **`Suspense`** viser en fallback-brukergrensesnitt mens en lazy (eller data-suspenderende) barn fortsatt laster. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Hvorfor det har betydning: mindre innledende lasting Uten kodedeling laster nettleseren **hele** appen (inkludert det tunge kartbiblioteket) før den viser noe. Med `lazy` deles `Chart`'s kode opp i sin egen fil og hentes bare når brukeren faktisk når den — noe som forbedrer innledende lastetid og Core Web Vitals. ## Hvordan Suspense koordinerer det Når `Chart` suspenderer (dens bundle er ikke klar), "pauser" React den delen av treet og rendrer den nærmeste `Suspense` fallback i stedet, og bytter så inn den virkelige komponenten når den laster. En enkelt grense kan pakke flere lazy barn og vise en fallback: ```jsx }>

``` ## Utover kodedeling Suspense koordinerer også **datahenting** med rammeverk/biblioteker som "suspenderer" på en ventende fetch, og parrer med **streaming SSR** (Next.js App Router) for å sende et raskt skall og streame saktere deler inn. Plasser grenser gjennomtenkt for å unngå store, jarrige layoutendringer når innhold popper inn.