Comment nous avons intégré SWR dans un projet et pourquoi nous l’avons adoré
Kamil Polok
09 juin 2021・6 min de lecture
Pourquoi SWR ?
Récemment, chez SDH, nous avons eu l’occasion de développer un projet avec React, épaulé par Redux/Toolkit. Le problème, c’est que, même si les données étaient conservées et récupérées dans le store, il n’y avait aucun mécanisme de mise en cache dans l’app. Et garder des dizaines de réponses dans le state, ce n’est pas exactement ce que j’appelle une bonne idée. Quoi qu’il en soit, on s’est vite mis à se perdre parmi tous ces slices du state, malgré l’usage de Toolkit.
En plus, ça n’avait aucun impact côté back-end à ce stade. Avec ces blocs de données gros comme des icebergs qui dérivaient partout, certaines requêtes mettaient une éternité à se résoudre. Et comme l’UI de l’application se résumait à de longues listes d’éléments avec peu d’opérations CRUD, il est vite apparu qu’une forme de cache nous serait bien utile. Nous avons donc opté pour SWR — une bibliothèque conçue par les développeurs de Vercel (également à l’origine de Next.js).
Qu’est-ce que SWR ?
OK, vous aimez lire des définitions ? J’espère que non, car celle-ci va être l’une des plus courtes que vous ayez jamais lues. « SWR est une bibliothèque de React Hooks pour la récupération de données distantes ». Voilà. Simple ? Oui, mais je vais maintenant vous montrer que SWR est aussi très puissant. Et au cas où vous vous poseriez la question, SWR signifie stale-while-revalidate. Ce qui explique déjà comment ça marche. SWR renvoie les données depuis le cache (stale), envoie une requête pour obtenir des données à jour (revalidate), puis renvoie les nouvelles données. Comme je le disais, simple.
Pourquoi nous avons adoré SWR
Il est facile de voir en quoi l’usage de SWR élimine les problèmes décrits au début de cet article. Grâce à SWR, nous avons :
- Fait tourner l’UI parfaitement (après les premières requêtes) grâce à la mise en cache
- Supprimé presque tous les slices qui stockaient les données de l’API et la logique associée
- Simplifié le flux de revalidation des données après des opérations CRUD sur les collections
- Accéléré le développement de nouvelles fonctionnalités dépendantes de l’API
Comment l’avons-nous implémentée pour obtenir de tels résultats ?
Comment fonctionne SWR
Après un court temps d’adaptation, SWR s’est révélé plutôt simple et très agréable à utiliser. Envie de faire une requête API avec SWR ? Voilà :
La seule subtilité, c’est le fetcher. C’est simplement votre fonction maison pour récupérer les données. L’application sur laquelle nous travaillions avait déjà axios configuré (interceptors, headers, base URL, etc.), donc nous avons simplement enveloppé notre instance axios comme ceci pour obtenir notre fetcher personnalisé :
Du coup, le hook complet peut être aussi simple que ceci (on passe la gestion des erreurs dans cet exemple) :
Et… c’est tout ! Nous avons créé un hook pour récupérer des données d’API en profitant de tous les avantages de SWR. À chaque appel, il renverra d’abord les données précédemment récupérées (si elles existent), puis revalidera et renverra ensuite la nouvelle collection.
SWR, par défaut, propose une poignée de paramètres préconfigurés (ils sont tous listés ici), qui rendent son utilisation très simple. Une option favorite à mentionner est dedupingInterval.
Scénario typique : on récupère des données dans un composant, on continue à le développer, les composants enfants se multiplient, et voilà qu’un enfant au 4e niveau a besoin des mêmes données. Comment les lui transmettre sans trop d’efforts et sans répéter les requêtes ? Pas de panique : réutilisez simplement le hook SWR… L’intervalle de déduplication empêchera d’exécuter la requête à nouveau pendant une durée spécifiée (2 secondes par défaut). Ça marche.
« Mais si j’appelle l’endpoint et qu’il renvoie les mêmes données qu’avant, mon composant va quand même se re-render ». Non : SWR implémente une comparaison profonde, donc un nouveau rendu n’est déclenché que lorsque les données ont réellement changé. Et la fonction de comparaison peut, bien sûr, être personnalisée.
Mutation de données
Vous pourriez dire que faire des GET, c’est facile — mais qu’en est-il de la partie mutation ? C’est sûrement plus compliqué. Eh bien, pas vraiment : les mutations n’ont pas à être un cauchemar, et j’ai été surpris de voir à quel point il est facile de muter des données avec SWR (ayant déjà eu quelques aventures avec Apollo). Voici un exemple réel :
Dans cet exemple, mutate est une fonction importée depuis SWR et /users est la clé que nous lui avons donnée dans le hook useUsers (il ne faut pas forcément utiliser l’URL de l’endpoint — vous pouvez passer la clé et l’URL séparément).
Si vous souhaitez mettre en cache et mettre à jour une entité (objet) unique récupérée depuis une collection plus large, muter-la simplement par sa clé comme ceci :
Ça paraît trop simple ? Ça l’est. Essayez, et vous pourriez gagner un temps précieux à écrire moins de logique Redux et à déboguer vos appels d’API.
Intégrations SWR
Comme vous le voyez, implémenter SWR est simple ; avec quelques raffinements, il ne faut pas grand-chose pour faire évoluer les exemples ci-dessus vers des niveaux plus abstraits. Évidemment, SWR ne se limite pas à cela et propose un grand nombre d’options et d’intégrations :
intégration GraphQL
gestion des erreurs avec options de retry
revalidation automatique
prise en charge de la pagination (y compris le chargement infini)
préfetching des données
et bien plus encore (documentation)
Nous avons trouvé SWR super agréable à utiliser et nous envisagerons clairement de l’employer sur de futurs projets. Si vous souhaitez en savoir plus sur cette excellente bibliothèque, consultez leur site officiel avec documentation, configurations et exemples ici.
Bon code !
Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland
Vous aimerez peut-être aussi...
Comment générer un PDF à partir de code HTML dans une application React ou Node.js
Générer des PDF à partir de HTML peut s’avérer délicat, mais avec les bonnes méthodes, vous pouvez obtenir les résultats souhaités. Explorez différentes solutions, des règles CSS d’impression aux bibliothèques comme html2canvas, jsPDF et Puppeteer. Comprenez les avantages et les inconvénients de chaque approche pour trouver la meilleure solution pour votre projet. Contactez‑nous à hello@start-up.house pour plus d’informations et d’assistance. Bonne chance dans vos projets de génération de PDF !
Eugene Zolotarenko
20 mai 2021・6 min de lecture
4 bonnes raisons d'utiliser Chakra UI dans votre prochain projet
Chakra UI est une bibliothèque de composants simple, modulaire et accessible pour créer des applications React rapidement. Grâce à sa facilité de personnalisation, à la prise en charge du mode sombre, à la prise en charge du responsive design et à son souci de l’accessibilité, Chakra UI se démarque des autres bibliothèques UI, ce qui en fait un excellent choix pour les développeurs React.
Mateusz Wójcik
19 janv. 2021・4 min de lecture
Boostez vos connaissances tech grâce aux blogs tech de référence
Les blogs technologiques ont évolué, passant de plateformes de discussion informelles à des médias d’actualité numériques influents, qui livrent des éclairages sur des sujets variés comme l’IA, la réalité virtuelle (VR), la cybersécurité et le développement d’applications mobiles. Destinés autant aux passionnés qu’aux professionnels, ils fournissent des informations essentielles, des analyses et des prévisions sur les tendances et les avancées technologiques, façonnant notre manière de comprendre et d’interagir avec le monde numérique.
Marek Pałys
21 oct. 2023・15 min de lecture
Agents d'IA pour l'optimisation des prix et des promotions
Comment des agents autonomes fixent les prix en temps réel et ciblent avec précision les promotions — en protégeant la marge plutôt que d’accorder des remises à tous ceux qui auraient payé le plein tarif.
Marek Pałys
28 août 2026・10 min de lecture
Comprendre les bases : BaseModel vs ActiveRecord Validator dans Rails
BaseModel et ActiveRecord Validator sont des outils essentiels dans Rails pour garantir l’intégrité des données. Tandis que BaseModel centralise la logique complexe commune, ActiveRecord Validator offre une validation simple et intégrée pour les attributs individuels. Découvrez leurs différences et quand utiliser chacun pour un développement Rails plus efficace.
Marek Pałys
10 oct. 2024・8 min de lecture
Maîtriser le SEO : comment structurer votre HTML pour améliorer votre positionnement
Maîtriser des structures HTML optimisées pour le SEO est essentiel pour améliorer votre classement sur les moteurs de recherche. Ce guide couvre les balises HTML clés, les données structurées et les meilleures pratiques pour renforcer la visibilité et les performances de votre site. Mettez ces techniques en œuvre pour rendre votre site davantage optimisé pour les moteurs de recherche.
Marek Majdak
10 juil. 2024・7 min de lecture
Récemment ajoutés
Comment Startup House a réduit à 2 minutes le processus de demande de crédit-bail pour Siemens Financial Services
Le leasing, c’était autrefois des formalités papier, des contrôles de crédit manuels et des décisions qui n’arrivaient qu’aux heures de bureau. Pour Siemens Financial Services Poland, Startup House a remplacé tout cela par SimplyLease Online : une demande en ligne que les clients remplissent en environ 2 minutes et une décision de crédit automatisée rendue en environ 7 minutes, à toute heure. Cette étude de cas montre comment la plateforme a été conçue dans le cadre des standards de sécurité de Siemens Group, comment elle se connecte aux systèmes Siemens et à des fournisseurs de données externes, et ce qu’a apporté un partenariat qui dure depuis 2016. Elle se conclut par trois enseignements applicables à presque tous les produits de financement ou de crédit.
Alexander Stasiak
06 oct. 2026・5 min de lecture
Une plateforme de cybersécurité pour clients du Fortune 500 a réduit de 95 % le temps d’onboarding client grâce à un agent IA développé par Startup House
Une plateforme de gestion des cyberrisques, à laquelle font confiance des entreprises du Fortune 500, avait un problème bien connu : ses clients l’appréciaient, mais ne l’ouvraient qu’une fois par trimestre, et l’onboarding nécessitait 45 minutes de configuration guidée. Startup House a créé Aria, un agent IA intégré au produit, avec une interface à quatre niveaux qui s’adresse aux membres du conseil d’administration, aux DAF et aux RSSI dans un seul et même espace. L’onboarding a chuté de 95 % pour passer sous les 2 minutes, l’exploration des données est devenue entièrement en libre-service, et la plateforme s’est muée en outil d’aide à la décision au quotidien. Cette étude de cas décrit l’interface, l’architecture d’isolation des tenants et explique pourquoi rien de tout cela n’a nécessité de modifier la base de code principale de la plateforme.
Marek Pałys
05 oct. 2026・5 min de lecture
IA et projets numériques de Startup House : 5 chiffres clés
Les promesses sont faciles dans le développement logiciel, c’est pourquoi cet article s’en tient aux chiffres. Il passe en revue cinq résultats issus de projets clients menés par Startup House, allant d’une réduction de 95 % du temps d’onboarding grâce à un agent d’IA intégré à une baisse de 40 % des coûts de développement pour Omnipack. Chaque section précise quel type de travail a permis d’obtenir ce résultat et renvoie à l’étude de cas publique correspondante. La section finale met en avant trois principes communs à ces projets, à reprendre que vous collaboriez avec nous ou non.
Alexander Stasiak
04 oct. 2026・5 min de lecture
Développement logiciel Healthtech chez Startup House : des projets axés sur la conformité et des résultats concrets
Dans les logiciels de santé, la conformité réglementaire est soit un choix d’architecture, soit une adaptation a posteriori. Cet article montre à quoi ressemble son intégration dès le premier jour à travers trois projets Startup House : une plateforme commerciale pour Siemens Healthineers, présente dans plus de 60 pays ; un MVP pour les soins liés à la démence, affiné au fil de 7 sessions de tests utilisateurs avec des patients et des aidants ; et Doogie, une vitrine IA conforme à HIPAA, développée en 2 mois. Il explique aussi comment le RAG garantit la traçabilité des réponses cliniques de l’IA jusqu’à des sources vérifiées, et pourquoi les données des patients ne sont jamais utilisées pour entraîner les modèles. Pour les entreprises MedTech et les plateformes SaaS de santé, c’est un aperçu concret de ce que signifie une ingénierie qui met la conformité au premier plan, au-delà du label.
Marek Pałys
03 oct. 2026・5 min de lecture
Développement EdTech chez Startup House : ce que nous avons créé et ce que cela a changé
Les plateformes EdTech échouent plus souvent pour des raisons d’UX que techniques : les apprenants abandonnent, le contenu ne passe pas à l’échelle et le ROI reste invisible. Cet article montre comment Startup House évite ces écueils grâce à une livraison par phases et à de vrais tests utilisateurs, avec deux projets à l’appui. Graspify est passée d’une idée ambitieuse à une plateforme de microlearning qui a formé des centaines d’employés lors d’un événement d’entreprise, et LITTLEWINE a obtenu en 2 semaines un périmètre prêt à présenter aux investisseurs à partir de 10 entretiens utilisateurs. Nous abordons aussi des outils d’apprentissage basés sur l’IA qui ne répondent qu’à partir de contenus approuvés et peuvent être mis en ligne en à peine 2 semaines.
Alexander Stasiak
02 oct. 2026・5 min de lecture
IA dans la fintech : projets, leçons apprises et résultats de Startup House
Les clients des fintechs attendent une rapidité de niveau grand public, tandis que les régulateurs exigent un contrôle de niveau bancaire. Cet article montre comment Startup House a géré cette tension à travers trois projets : des décisions de crédit automatisées 24 h/24 et 7 j/7 pour Siemens Financial Services, une plateforme de gestion des risques cyber qui a augmenté le chiffre d’affaires de 150 % en un an, et une équipe de fintech climatique pour CHOOOSE constituée en 2 semaines. Chaque projet s’accompagne de la leçon qu’il nous a enseignée. L’article se termine par cinq règles pour l’IA dans la finance, de la nécessité de fonder chaque réponse sur des données vérifiées jusqu’à l’intégration de l’isolation des tenants dans l’architecture.
Marek Pałys
01 oct. 2026・5 min de lecture
Prêt à centraliser votre savoir-faire avec l'IA ?
Entrez dans un nouveau chapitre de la gestion des connaissances — où l'assistant IA devient le pilier central de votre expérience de support numérique.
Collaborez avec une équipe reconnue par des entreprises de premier plan.
