Come funzionano Suspense e React.lazy per la divisione del codice?

Question

Accepted Answer

**`React.lazy`** carica il bundle JavaScript di un componente **su richiesta** (solo quando viene renderizzato per la prima volta). **`Suspense`** mostra un'interfaccia utente di fallback mentre un qualsiasi componente figlio lazy (o che sospende dati) è ancora in fase di caricamento. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Perché è importante: carico iniziale più piccolo Senza la divisione del codice, il browser scarica l'**intera** app (inclusa la libreria di grafici pesante) prima di mostrare qualsiasi cosa. Con `lazy`, il codice di `Chart` viene diviso nel suo file e recuperato solo quando l'utente effettivamente lo raggiunge — migliorando il tempo di caricamento iniziale e Core Web Vitals. ## Come Suspense lo coordina Quando `Chart` si sospende (il suo bundle non è pronto), React "mette in pausa" quella parte dell'albero e renderizza il fallback `Suspense` più vicino, quindi scambia il componente reale una volta caricato. Un singolo limite può avvolgere più componenti figli lazy e mostrare un fallback: ```jsx }>

``` ## Oltre la divisione del codice Suspense coordina anche il **caricamento dati** con framework/librerie che "si sospendono" su un fetch in sospeso, e si abbina allo **streaming SSR** (Next.js App Router) per inviare una shell veloce e trasmettere in streaming parti più lente. Posiziona i limiti con attenzione per evitare grandi e bruschi cambiamenti di layout quando il contenuto viene visualizzato.