Qu'est-ce que le composant Suspense dans Vue ?

Question

Accepted Answer

`` est un composant intégré qui coordonne les **dépendances asynchrones** dans son arbre de composants — il affiche un fallback (interface de chargement) jusqu'à ce que toutes les opérations asynchrones imbriquées se résolvent, puis affiche le contenu réel. Il supprime le modèle répétitif de `isLoading` manuel. ## Pourquoi c'est important ```vue ``` ## Cela fonctionne avec async setup() / top-level await ```vue ``` Normalement, un composant ne peut pas `await` dans setup sans gérer l'état de chargement. `` permet à un enfant d'utiliser **top-level `await`** (ou `setup` asynchrone), et le Suspense parent gère l'état de chargement pour lui — le code de l'enfant reste propre, se contentant d'`await`er ses données. ## Cela attend TOUTES les dépendances asynchrones imbriquées ```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). ``` ## Gestion des erreurs ```vue ``` Associez Suspense avec une error boundary (`onErrorCaptured`) pour gérer les setups asynchrones échoués, puisque Suspense lui-même gère uniquement la transition chargement/chargé. ## Remarque sur le statut ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Pourquoi c'est important `` coordonne de manière déclarative les états de chargement asynchrone — permettant aux composants d'`await` leurs données directement tandis qu'un seul ancêtre affiche un fallback jusqu'à ce que tout soit prêt. Cela élimine les drapeaux `isLoading` dispersés et les multiples spinners, et sous-tend la récupération de données dans des frameworks comme Nuxt. Savoir qu'il existe (et qu'il est toujours expérimental, mieux associé à une error boundary) est utile pour une UI asynchrone propre, en particulier dans les applications SSR/data-heavy.