Hoe werken Suspense en React.lazy voor code splitting?

Question

Accepted Answer

**`React.lazy`** laadt een componentbundel **op aanvraag** (alleen wanneer deze voor het eerst wordt weergegeven). **`Suspense`** toont een fallback-UI terwijl enige lazy (of data-suspenderende) child nog steeds aan het laden is. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Waarom het belangrijk is Zonder code splitting downloadt de browser uw **volledige** app (inclusief de zware charting-bibliotheek) voordat iets wordt weergegeven. Met `lazy` wordt de code van `Chart` in zijn eigen bestand gesplitst en alleen opgehaald wanneer de gebruiker het daadwerkelijk bereikt — wat de initiële laadtijd en Core Web Vitals verbetert. ## Hoe Suspense het coördineert Wanneer `Chart` suspends (de bundle is niet gereed), "pauzeert" React dat deel van de tree en geeft in plaats daarvan de dichtstbijzijnde `Suspense` fallback weer. Vervolgens wordt de echte component ingewisseld zodra deze is geladen. Een enkele boundary kan meerdere lazy children omvatten en één fallback weergeven: ```jsx }>

``` ## Voorbij code splitting Suspense coördineert ook **data loading** met frameworks/libraries die "suspenderen" bij een openstaande fetch, en werkt samen met **streaming SSR** (Next.js App Router) om een snelle shell te sturen en langzamere delen in te streamen. Plaats boundaries doordacht om grote, storende layout shifts te vermijden wanneer content verschijnt.