Apa itu komponen Suspense di Vue?

Question

Accepted Answer

`` adalah komponen built-in yang mengkoordinasikan **dependensi async** di pohon komponennya — menampilkan fallback (loading UI) hingga semua operasi async bertingkat terselesaikan, kemudian menampilkan konten sebenarnya. Ini menghilangkan boilerplate `isLoading` manual. ## Mengapa ini penting ```vue ``` ## Bekerja dengan async setup() / top-level await ```vue ``` Biasanya sebuah komponen tidak bisa `await` di setup tanpa mengelola state loading. `` membiarkan child menggunakan **top-level `await`** (atau async `setup`), dan parent Suspense menangani state loading untuk itu — kode child tetap bersih, hanya `await` datanya. ## Menunggu SEMUA dependensi async bertingkat ```text waits for every async setup in its subtree to resolve, then swaps the fallback for the real content in one go (avoids a cascade of separate spinners). ``` ## Menangani error ```vue ``` Gabungkan Suspense dengan error boundary (`onErrorCaptured`) untuk menangani async setup yang gagal, karena Suspense sendiri hanya mengelola transisi loading/loaded. ## Catatan status ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Mengapa ini penting `` secara deklaratif mengkoordinasikan state loading async — membiarkan komponen `await` data mereka langsung sementara satu ancestor menampilkan satu fallback hingga semuanya siap. Ini menghilangkan flag `isLoading` yang tersebar dan banyak spinner, dan mendasari pengambilan data di framework seperti Nuxt. Mengetahui bahwa ini ada (dan bahwa itu masih experimental, paling baik dipasangkan dengan error boundary) berguna untuk UI async yang bersih, terutama di aplikasi SSR/data-heavy.