Bagaimana Suspense dan React.lazy bekerja untuk pemisahan kode?

Question

Accepted Answer

**`React.lazy`** memuat bundel JavaScript komponen **sesuai permintaan** (hanya ketika pertama kali dirender). **`Suspense`** menampilkan UI fallback sementara ada anak yang malas (atau mengesampingkan data) masih sedang dimuat. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Mengapa ini penting: muatan awal yang lebih kecil Tanpa pemisahan kode, browser mengunduh **seluruh** aplikasi Anda (termasuk pustaka grafik berat) sebelum menampilkan apa pun. Dengan `lazy`, kode `Chart` dipecah menjadi file terpisahnya dan diambil hanya ketika pengguna benar-benar mencapainya — meningkatkan waktu pemuatan awal dan Core Web Vitals. ## Bagaimana Suspense mengoordinasikannya Ketika `Chart` ditangguhkan (bundlenya tidak siap), React "menjeda" bagian pohon itu dan merender fallback `Suspense` terdekat, kemudian menukar komponen yang sebenarnya setelah dimuat. Satu batas dapat membungkus beberapa anak malas dan menampilkan satu fallback: ```jsx }>

``` ## Melampaui pemisahan kode Suspense juga mengoordinasikan **pemuatan data** dengan kerangka kerja/pustaka yang "mengesampingkan" pada ambilan yang tertunda, dan berpasangan dengan **streaming SSR** (Next.js App Router) untuk mengirim shell yang cepat dan mem-stream bagian yang lebih lambat. Tempatkan batas dengan bijaksana untuk menghindari pergeseran tata letak yang besar dan mengguncang ketika konten muncul.