Jak działają Suspense i React.lazy do podziału kodu?

Question

Accepted Answer

**`React.lazy`** wczytuje bundle JavaScript komponentu **na żądanie** (tylko gdy po raz pierwszy się renderuje). **`Suspense`** wyświetla interfejs rezerwowy, podczas gdy jakikolwiek lazy (lub wstrzymany na danych) element potomny wciąż się wczytuje. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Dlaczego to ważne Bez podziału kodu przeglądarka pobiera **całą** aplikację (w tym ciężką bibliotekę do tworzenia wykresów) przed wyświetleniem czegokolwiek. Z `lazy` kod `Chart` jest podzielony na własny plik i pobierany tylko wtedy, gdy użytkownik faktycznie go osiągnie — poprawiając początkowy czas ładowania i Core Web Vitals. ## Jak Suspense to koordynuje Kiedy `Chart` się wstrzymuje (jego bundle nie jest gotowy), React "wstrzymuje" tę część drzewa i zamiast tego renderuje najbliższy fallback `Suspense`, a następnie wymienia go na rzeczywisty komponent po jego wczytaniu. Jedno ograniczenie może owinąć kilka elementów lazy i wyświetlić jeden fallback: ```jsx }>

``` ## Poza podziałem kodu Suspense również koordynuje **ładowanie danych** z frameworkami/bibliotekami, które "wstrzymują" się na oczekującym pobraniu, i łączy się z **SSR przesyłania strumieniowego** (Next.js App Router), aby wysłać szybką powłokę i przesłać wolniejsze części. Umieszczaj ograniczenia rozsądnie, aby uniknąć dużych, drażliwych zmian układu, gdy zawartość się pojawia.