Cum funcționează Suspense și React.lazy pentru code splitting?

Question

Accepted Answer

**`React.lazy`** încarcă bundle-ul JavaScript al unui component **la cerere** (doar când se renderizează pentru prima dată). **`Suspense`** afișează o UI de rezervă în timp ce orice copil lazy (sau care suspend pentru date) se încarcă încă. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## De ce conteaza Fără code splitting, browserul descarcă **întreaga** aplicație (inclusiv biblioteca grea de diagrame) înainte de a afișa ceva. Cu `lazy`, codul `Chart` este împărțit în propriul fișier și este preluat doar atunci când utilizatorul îl atinge de fapt — îmbunătățind timp inițial de încărcare și Core Web Vitals. ## Cum Suspense îl coordonează Când `Chart` suspendă (bundle-ul acestuia nu este gata), React "pauzează" acea parte a arborelui și randează cel mai apropiat fallback `Suspense` în loc, apoi schimbă componenta reală după ce se încarcă. O singură limită poate înfășura mai mulți copii lazy și afișa un fallback: ```jsx }>

``` ## Dincolo de code splitting Suspense coordonează, de asemenea, **încărcarea de date** cu framework-uri/biblioteci care "suspendă" la o preluare în așteptare și se asociază cu **SSR de streaming** (Next.js App Router) pentru a trimite o carcasă rapidă și transmite parți mai lente. Plasați limitele cu gândire pentru a evita schimbări de aspect mari și deranjante atunci când conținutul apare.