Streaming UI dengan React Suspense

Streaming memecah halaman menjadi potongan-potongan kecil. Komponen cepat langsung tampil, sementara komponen lambat dibungkus <Suspense>.

👀 Contoh dulu

<Suspense fallback={<Skeleton />}><KomponenLambat /></Suspense>

Hasilnya: User langsung melihat UI awal tanpa menunggu komponen lambat selesai.

💡 Meningkatkan skor First Contentful Paint (FCP) secara signifikan.

📝 Sekarang giliranmu

Komponen <HeavyChart /> sangat lambat dimuat. Bungkus komponen tersebut dengan <Suspense> yang memiliki fallback berupa tag <p>Memuat grafik...</p> agar pengguna tidak melihat layar kosong.

Preview