Jak fungují Suspense a React.lazy pro dělení kódu?

Question

Accepted Answer

**`React.lazy`** načítá bundle JavaScriptu komponenty **na vyžádání** (pouze když se poprvé vykreslí). **`Suspense`** zobrazuje fallback UI, zatímco jakákoliv lazy (nebo data-suspending) podřízená komponenta se stále načítá. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Proč na tom záleží: menší počáteční zatížení Bez dělení kódu si prohlížeč stáhne **celou** vaši aplikaci (včetně těžké grafické knihovny), než cokoliv zobrazí. S `lazy` je kód `Chart` rozdělen do svého vlastního souboru a stažen pouze tehdy, když se uživatel skutečně dostane ke komponentě — zlepšuje se doba počátečního načítání a Core Web Vitals. ## Jak Suspense to koordinuje Když se `Chart` pozastaví (jeho bundle není připraven), React "pozastaví" tu část stromu a místo toho vykreslí nejbližší fallback `Suspense`, poté vyměňuje skutečnou komponentu jakmile se načte. Jedna hranice může obalit několik lazy potomků a zobrazit jeden fallback: ```jsx }>

``` ## Mimo dělení kódu Suspense také koordinuje **načítání dat** s frameworky/knihovnami, které se "pozastaví" při nevyřízené operaci fetch, a páruje se s **streaming SSR** (Next.js App Router) na odeslání rychlého shella a streamování pomalejších částí. Umísťujte hranice promyšleně, abyste se vyhnuli velkým, rušivým změnám rozložení, když se obsah objeví.