Kaip veikia Suspense ir React.lazy kodo skaidymui?

React.lazy įkelia komponento JavaScript paketą pagal poreikį (tik kai jis pirmą kartą renderinamas). Suspense parodo atsarginę UI, kol bet kuris lėtas (arba duomenų atžvilgiu stabdomas) vaikas vis dar įkelia.

const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}> {/* shown until Chart's code arrives */}
      <Chart data={data} />
    </Suspense>
  );
}

Kodėl tai svarbu: mažesnė pradinė apkrova

Be kodo skaidymo, naršyklė atsisiunčia visą jūsų programą (įskaitant galingą diagramų biblioteką) prieš jums parodyti bet ką. Su lazy, Chart kodas yra padalytas į atskirą failą ir atsisiunčiamas tik tada, kai naudotojas jį pasiekia — gerindamas pradinės įkėlimo laiką ir Core Web Vitals.

Kaip Suspense tai koordinuoja

Kai Chart stabdomas (jo paketas nėra paruoštas), React "pristabdo" tą medžio dalį ir vietoje to renderina artimiausią Suspense atsarginę variantą, tada įdeda tikrąjį komponentą, kai jis įkels. Viena riba gali apvynioti kelis lėtus vaikus ir parodyti vieną atsarginį variantą:

<Suspense fallback={<PageSkeleton />}>
  <Header />
  <LazyFeed />
  <LazySidebar />
</Suspense>

Daugiau nei kodo skaidymas

Suspense taip pat koordinuoja duomenų įkėlimą su sistemomis/bibliotekomis, kurios "stabdo" laukiant gautos duomenų, ir jungiasi su srautine SSR (Next.js App Router) greitam apvalkui siųsti ir lėtesnes dalis srautu. Racionaliai nustatykite ribas, kad išvengtumėte didelių, apjungusių maketų pokyčių, kai turinio atsiranda.