M

MLOG

Français

Optimisez la récupération de données dans React avec Suspense ! Explorez différentes stratégies et créez des applications réactives et conviviales.

React Suspense : Stratégies de récupération de données pour les applications modernes

React Suspense est une fonctionnalité puissante introduite dans React 16.6 qui simplifie la gestion des opérations asynchrones, en particulier la récupération de données. Elle vous permet de "suspendre" le rendu des composants en attendant que les données soient chargées, offrant ainsi une manière plus déclarative et conviviale de gérer les états de chargement. Ce guide explore diverses stratégies de récupération de données utilisant React Suspense et propose des perspectives pratiques pour construire des applications réactives et performantes.

Comprendre React Suspense

Avant de plonger dans des stratégies spécifiques, comprenons les concepts clés de React Suspense :

Stratégies de récupération de données avec Suspense

Voici plusieurs stratégies efficaces de récupération de données utilisant React Suspense :

1. Récupération de données au niveau du composant

C'est l'approche la plus simple, où chaque composant récupère ses propres données dans une limite Suspense. Elle convient aux composants simples avec des exigences de données indépendantes.

Exemple :

Supposons que nous ayons un composant UserProfile qui doit récupérer les données utilisateur d'une API :

// Utilititaire simple de récupération de données (remplacez par votre bibliothèque préférée)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`Erreur HTTP ! Statut : ${res.status}`);
      }
      return res.json();
    })
    .then(
      res => {
        status = 'success';
        result = res;
      },
      err => {
        status = 'error';
        result = err;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    }
  };
};

const userResource = fetchData('/api/user/123');

function UserProfile() {
  const user = userResource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email : {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Chargement des données utilisateur...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Explication :

Avantages :

Inconvénients :

2. Récupération de données parallèle

Pour éviter la récupération en cascade, vous pouvez initier plusieurs requêtes de données simultanément et utiliser Promise.all ou des techniques similaires pour attendre qu'elles soient toutes résolues avant de rendre les composants. Cela minimise le temps de chargement global.

Exemple :

const userResource = fetchData('/api/user/123');
const postsResource = fetchData('/api/user/123/posts');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email : {user.email}</p>
      <h3>Articles :</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>) )}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Chargement des données utilisateur et des articles...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Explication :

Avantages :

Inconvénients :

3. Hydratation sélective (pour le rendu côté serveur - SSR)

Lors de l'utilisation du rendu côté serveur (SSR), Suspense peut être utilisé pour hydrater sélectivement des parties de la page. Cela signifie que vous pouvez prioriser l'hydratation des parties les plus importantes de la page en premier, améliorant ainsi le Temps d'interactivité (TTI) et les performances perçues. Ceci est utile dans les scénarios où vous souhaitez afficher rapidement la disposition de base ou le contenu principal, tout en différant l'hydratation des composants moins critiques.

Exemple (conceptuel) :

// Côté serveur :
<Suspense fallback={<div>Chargement du contenu critique...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>Chargement du contenu optionnel...</div>}>
  <OptionalContent />
</Suspense>

Explication :

Avantages :

Inconvénients :

4. Bibliothèques de récupération de données avec prise en charge de Suspense

Plusieurs bibliothèques populaires de récupération de données prennent en charge nativement React Suspense. Ces bibliothèques offrent souvent un moyen plus pratique et efficace de récupérer des données et de s'intégrer à Suspense. Voici quelques exemples notables :

Exemple (avec SWR) :

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function UserProfile() {
  const { data: user, error } = useSWR('/api/user/123', fetcher, { suspense: true })

  if (error) return <div>échec du chargement</div>
  if (!user) return <div>chargement...</div> // Ceci n'est probablement jamais rendu avec Suspense

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email : {user.email}</p>
    </div>
  )
}

function App() {
  return (
    <Suspense fallback={<div>Chargement des données utilisateur...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Explication :

Avantages :

Inconvénients :

Gestion des erreurs avec Suspense

La gestion des erreurs est cruciale lors de l'utilisation de Suspense. React fournit un composant ErrorBoundary pour intercepter les erreurs qui se produisent dans les limites Suspense.

Exemple :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Mettre à jour l'état pour que le prochain rendu affiche l'UI de secours.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Vous pouvez également enregistrer l'erreur auprès d'un service de reporting d'erreurs
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Vous pouvez rendre n'importe quel UI de secours personnalisé
      return <h1>Quelque chose s'est mal passé.</h1>;
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Chargement...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

Explication :

Meilleures pratiques pour l'utilisation de React Suspense

Exemples concrets

React Suspense peut être appliqué dans divers scénarios, notamment :

Exemple 1 : Plateforme d'e-commerce internationale

Imaginez une plateforme d'e-commerce qui sert des clients dans différents pays. Les détails des produits, tels que les prix et les descriptions, peuvent devoir être récupérés en fonction de la localisation de l'utilisateur. Suspense peut être utilisé pour afficher un indicateur de chargement pendant la récupération des informations produit localisées.

function ProductDetails({ productId, locale }) {
  const productResource = fetchData(`/api/products/${productId}?locale=${locale}`);
  const product = productResource.read();

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Prix : {product.price}</p>
      <p>Description : {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // Fonction pour déterminer la locale de l'utilisateur
  return (
    <Suspense fallback={<div>Chargement des détails du produit...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

Exemple 2 : Flux de médias sociaux mondial

Considérez une plateforme de médias sociaux affichant un flux de publications d'utilisateurs du monde entier. Chaque publication peut inclure du texte, des images et des vidéos, dont le chargement peut prendre des temps variables. Suspense peut être utilisé pour afficher des espaces réservés pour les publications individuelles pendant le chargement de leur contenu, offrant ainsi une expérience de défilement plus fluide.

function Post({ postId }) {
  const postResource = fetchData(`/api/posts/${postId}`);
  const post = postResource.read();

  return (
    <div>
      <p>{post.text}</p>
      {post.image && <img src={post.image} alt="Image de publication" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // Fonction pour récupérer une liste d'IDs de publication
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>Chargement de la publication...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

Conclusion

React Suspense est un outil puissant pour gérer la récupération de données asynchrones dans les applications React. En comprenant les différentes stratégies de récupération de données et les meilleures pratiques, vous pouvez construire des applications réactives, conviviales et performantes qui offrent une excellente expérience utilisateur. Expérimentez avec différentes stratégies et bibliothèques pour trouver la meilleure approche pour vos besoins spécifiques.

Alors que React continue d'évoluer, Suspense jouera probablement un rôle encore plus important dans la récupération de données et le rendu. Rester informé des derniers développements et des meilleures pratiques vous aidera à exploiter tout le potentiel de cette fonctionnalité.