Digital Transformation
Suspense Boundary
Suspense Boundary adalah area di antarmuka React yang ditandai untuk menunggu data atau komponen lambat, sambil menampilkan placeholder loading agar bagian halaman lain bisa tampil lebih dulu.
TL;DR: Suspense Boundary adalah penanda di pohon komponen React yang menentukan area mana yang boleh menunggu data atau modul lambat. React akan menampilkan fallback loading di area itu sambil bagian lain halaman tetap berjalan, sehingga pengguna tidak melihat layar putih.
Apa itu Suspense Boundary?
Suspense Boundary adalah komponen pembungkus dari React, yaitu <Suspense>, yang menentukan bagian mana dari halaman yang boleh menunggu. Saat komponen di dalamnya belum siap, React akan merender fallback yang ditentukan, biasanya skeleton atau spinner. Setelah data atau modul siap, isi sebenarnya menggantikan fallback secara otomatis.
Konsep ini terkait erat dengan Streaming SSR karena setiap Suspense Boundary di server menjadi titik di mana server bisa mengirim chunk HTML terpisah, tanpa menunggu seluruh halaman selesai.
Cara Kerja Singkat
| Tahap | Yang Terjadi |
|---|---|
| 1. Render mulai | Komponen di luar boundary langsung dirender |
| 2. Komponen lambat | Komponen di dalam boundary trigger Suspense |
| 3. Fallback tampil | Skeleton atau placeholder muncul |
| 4. Data tiba | Isi asli menggantikan fallback |
Kenapa Penting?
Tanpa Suspense Boundary, satu komponen lambat bisa menahan seluruh halaman. Dengan boundary yang ditempatkan dengan benar, LCP tetap rendah karena konten utama tidak tergantung pada widget yang berat. Dalam praktik klien Vito Atmo, pemasangan boundary di sekitar widget laporan keuangan dashboard menurunkan persepsi waktu tunggu pengguna secara signifikan.
Penjelasan resmi pola ini ada di react.dev/reference/react/Suspense.
Pertanyaan Umum
Berapa banyak Suspense Boundary yang ideal?
Tidak ada angka pasti. Aturan praktis: pasang di sekitar bagian halaman yang punya kecepatan data berbeda. Terlalu banyak boundary bisa membuat halaman terasa berkedip, terlalu sedikit membuat halaman menunggu komponen paling lambat.
Apakah Suspense Boundary hanya untuk Server Component?
Tidak. Suspense awalnya untuk client-side lazy loading, lalu diperluas ke server. Kedua skenario tetap relevan, tergantung di mana sumber lambatnya.
Istilah Terkait