Le composant React <Suspense> permet de mieux gérer le chargement des composants asynchrones en affichant un contenu temporaire pendant leur préparation. Cette approche fluidifie l’expérience utilisateur en évitant les écrans vides ou les blocages.
Qu’est-ce que <Suspense> ?
<Suspense> enveloppe un composant asynchrone et affiche un fallback (indicateur de chargement) tant que ce composant n’est pas prêt. Cela évite de bloquer l’interface et garde l’utilisateur informé que du contenu arrive.
Exemple d'utilisation
1"use client";
2
3import React, { Suspense } from "react";
4import MonComposantAsynchrone from "./MonComposantAsynchrone";
5
6export default function Page() {
7 return (
8 <Suspense fallback={<div>Chargement...</div>}>
9 <MonComposantAsynchrone />
10 </Suspense>
11 );
12}Le fallback <div>Chargement...</div> s’affiche immédiatement pendant que MonComposantAsynchrone se charge. L’utilisateur voit un retour visuel instantané, ce qui réduit la sensation d’attente.
L’impact sur l’expérience utilisateur
Grâce à <Suspense> , l’application reste réactive et évite les blancs ou blocages lors du chargement des parties asynchrones. L’affichage progressif du contenu donne une impression de rapidité et de fluidité, essentielle pour maintenir l’attention.
Bonnes pratiques
- Privilégier un fallback simple et discret qui informe sans distraire.
- Utiliser <Suspense> uniquement autour des composants qui chargent des données ou sont lourds à afficher.
- Coupler avec une gestion d’erreurs spécifique pour éviter les blocages définitifs.