React.lazy charge le bundle JavaScript d'un composant à la demande (uniquement lors de son premier rendu). Suspense affiche une UI de secours tandis que n'importe quel enfant lazy (ou data-suspending) se charge toujours.
= .( ());
() {
(
);
}
Sans fractionnement de code, le navigateur télécharge votre entire app (y compris la lourde bibliothèque de graphiques) avant d'afficher quoi que ce soit. Avec lazy, le code de Chart est divisé dans son propre fichier et récupéré uniquement lorsque l'utilisateur arrive réellement — améliorant le temps de chargement initial et les Core Web Vitals.
Quand Chart se suspend (son bundle n'est pas prêt), React « met en pause » cette partie de l'arbre et affiche la fallback Suspense la plus proche à la place, puis bascule vers le composant réel une fois qu'il se charge. Une seule limite peut envelopper plusieurs enfants lazy et afficher une fallback unique :
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense coordonne également le chargement des données avec des frameworks/bibliothèques qui « suspendent » sur une récupération en attente, et s'associe au streaming SSR (Next.js App Router) pour envoyer un shell rapide et diffuser les parties plus lentes. Placez les limites judicieusement pour éviter les grands décalages de mise en page gênants lorsque le contenu s'affiche.