Kako Suspense i React.lazy funkcioniraju za dijeljenje koda?

Question

Accepted Answer

**`React.lazy`** učitava JavaScript paket komponente **na zahtjev** (samo kada se prvi put renderira). **`Suspense`** prikazuje fallback UI dok je bilo koja lijena (ili podatkovnim suspenzirajuća) dijete još uvijek učitavanja. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Zašto je važno: manji početni učitak Bez dijeljenja koda, preglednik preuzima vašu **cijelu** aplikaciju (uključujući težaku knjižnicu za grafikone) prije nego što prikaže bilo što. S `lazy`, `Chart` kod je podjeljen u svoju datoteku i dohvaćen samo kada korisnik zaista do njega dođe — poboljšavajući vrijeme početnog učitavanja i Core Web Vitals. ## Kako Suspense to usklađuje Kada se `Chart` suspenzuje (njegov paket nije spreman), React "pauzira" taj dio stabla i umjesto toga renderira najbližu `Suspense` fallback, zatim zamijeni stvarnu komponentu nakon što se učita. Jedna granica može umotati nekoliko ljenih djece i prikazati jedan fallback: ```jsx }>

``` ## Izvan dijeljenja koda Suspense također usklađuje **učitavanje podataka** s okvirima/bibliotekama koje se "suspenzuju" na preostajućem prihvatanju, i parira se sa **streaming SSR** (Next.js App Router) kako bi se poslala brza ljuska i strujo sporiji dijelovi. Postavite granice s mislima kako biste izbjegili velika, šokantna svojstva rasporeda kada se sadržaj pojavi.