Retour • 10/12/2024
Fetch des données en React - Le guide ultime pour bien faire
Écris par Melvyn Malherbe le 10/12/2024
Le fetch de données est une partie essentielle de toute application web moderne. Dans ce guide, je vais t'expliquer les différentes méthodes pour fetch des données en React, leurs avantages et inconvénients.
Pourquoi fetch des données ?
Quasiment toutes les applications web ont besoin de récupérer des données depuis une API. Que ce soit pour afficher :
- Une liste d'articles
- Les informations d'un utilisateur
- Des données en temps réel
- Des statistiques
Le fetch de données est partout ! Mais comment bien le faire en React ?
useEffect + fetch
La première approche, celle que tout le monde utilise au début, c'est d'utiliser useEffect avec fetch. Si tu ne connais pas bien useEffect, je te conseille de lire mon article sur useEffect.
Voici un exemple simple :
Ce code est simple mais il a plusieurs problèmes :
- Pas de gestion d'erreur
- Pas d'état de chargement
- Pas d'annulation des requêtes (memory leak)
- Pas de cache
- Pas de revalidation
Dans une grosse application, on ne peut pas vraiment se passer de ce genre de fonctionnalités. Pour les avoir, on va pouvoir avoir un code du genre :
Ce code est beaucoup plus complet mais :
- Il est très verbeux
- Il faut répéter cette logique pour chaque fetch
- Il manque encore des fonctionnalités (cache, revalidation, etc.)
Pour résoudre ce problème, on va utiliser des librairies qui permettent de gérer ça pour nous sans avoir besoin de se soucier de tout ça.
SWR - La solution simple
SWR est une librairie créée par Vercel qui simplifie énormément le fetch de données. Voici le même exemple avec SWR :
Avantages de SWR :
- Code très concis
- Gestion automatique du cache
- Revalidation automatique
- Gestion des erreurs simplifiée
- Optimisé pour Next.js
Tanstack Query - La solution complète
Tanstack Query (anciennement React Query) est la solution la plus complète pour gérer le fetch de données en React.
Tanstack Query offre encore plus de fonctionnalités :
- Gestion avancée du cache
- Invalidation du cache
- Mutations optimistes
- Prefetching
- DevTools intégrés
- Support TypeScript natif
Conclusion
Pour résumer, voici mes recommandations :
- N'utilise pas
useEffect+fetchdirectement, c'est trop complexe à bien faire - Utilise SWR si tu travailles avec Next.js et que tu veux une solution simple car tu ne fais pas beaucoup de fetch des données
- Utilise Tanstack Query si tu veux une solution complète et que tu as besoin de fonctionnalités avancées
En règle général, il n'y a pas besoin de réfléchir :
Utilise toujours Tanstack Query !
C'est de loin la meilleure solution dans la majorité des cas.
Le meilleur moyen d'apprendre NextJS !
Rejoins par développeurs, cette formation reçoit une note de 4.7 / 5 🚀
Reçois la formation gratuitement dans ta boîte mail :
Si tu veux approfondir tes connaissances React, je te conseille de lire :