React.lazy bir bileşenin JavaScript paketini on demand (yalnızca ilk kez işlendiğinde) yükler. Suspense herhangi bir lazy (veya data-suspending) alt bileşen hala yüklenirken bir geri dönüş UI'sı gösterir.
jsx
= .( ());
() {
(
);
}
React.lazy bir bileşenin JavaScript paketini on demand (yalnızca ilk kez işlendiğinde) yükler. Suspense herhangi bir lazy (veya data-suspending) alt bileşen hala yüklenirken bir geri dönüş UI'sı gösterir.
= .( ());
() {
(
);
}
Kod bölümleme olmadan, tarayıcı herhangi bir şey göstermeden önce tüm uygulamanızı (ağır grafik kütüphanesi dahil) indirir. lazy ile Chart'ın kodu kendi dosyasına ayrılır ve yalnızca kullanıcı gerçekten ona ulaştığında alınır — ilk yükleme süresini ve Core Web Vitals'ı iyileştirir.
Chart askıya alındığında (paketi hazır değilse), React ağacın o kısmını "duraklatır" ve en yakın Suspense geri dönüşünü bunun yerine işler, ardından yüklendikten sonra gerçek bileşeni değiştirir. Tek bir sınır birden fazla lazy alt öğeyi sarabilir ve bir geri dönüşü gösterebilir:
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense ayrıca bekleyen bir getirişe "askıya alan" çerçeveler/kitaplıklarla veri yüklemesini koordine eder ve akış SSR (Next.js App Router) ile eşleşir hızlı bir kabuk göndermek ve daha yavaş parçaları akışla göndermek için. Sınırları dikkatli bir şekilde yerleştirin, içerik ortaya çıktığında büyük, titrek düzen değişikliklerini önlemek için.