Why I don't use React-Query and tRPC anymore

Summary

Dans cette vidéo, l'animateur explique pourquoi il n'utilise plus React Query et tRPC avec Next.js, malgré qu'il n'ait rien contre ces outils en principe. Il montre comment React Query permet de mettre en cache les données pour éviter les requêtes réseau redondantes, mais souligne que Next.js gère déjà ce caching de manière efficace. Concernant tRPC, il est utilisé pour assurer une communication client-serveur type-safe, mais Next.js propose des actions de serveur qui offrent les mêmes avantages. L'animateur recommande toujours l'utilisation de React Query et tRPC dans des applications React non-Next.js, mais pour Next.js, il préfère les fonctionnalités natives du framework.

Takeaways

• 😀 L'auteur a arrêté d'utiliser React Query et tRPC dans Next.js, mais il reconnaît leur utilité en dehors de Next.js.
• 🔍 React Query est utilisé pour la mise en cache des données pour éviter les requêtes réseau redondantes.
• 🎯 Avec React Query, il n'y a pas de requête réseau lorsque l'on clique sur un élément qui a déjà été chargé, contrairement à l'utilisation traditionnelle de `useEffect`.
• 🌐 Next.js offre une mise en cache intégrée qui rend inutile l'utilisation de React Query pour la récupération de données.
• 🛠️ Dans Next.js, la mise en cache fonctionne automatiquement et persiste même après le déploiement grâce à la mise en cache des résultats des appels de récupération.
• 📱 Next.js utilise également la pré-extraction avec le composant `Link` pour améliorer les performances de navigation.
• 💡 tRPC est utilisé pour la communication client-serveur type-safe, offrant une meilleure expérience de développement avec TypeScript.
• 🛂 tRPC permet de spécifier les types d'entrée et de sortie pour les requêtes et les mutations, réduisant les erreurs et améliorant la maintenance du code.
• 🚀 Next.js introduit les actions serveur qui offrent une alternative à tRPC pour les mutations de données côté serveur.
• ⚙️ Les actions serveur sont similaires à des fonctions locales et sont appelées de manière universelle, mais nécessitent une validation des entrées.
• 🌐 Si l'on envisage de prendre en charge des clients en dehors de Next.js, comme une application mobile React Native, tRPC pourrait être préférable à cause de sa portabilité.

Q & A

Pourquoi l'auteur n'utilise-t-il plus React Query ou tRPC dans Next.js?

L'auteur mentionne qu'il n'utilise plus React Query ou tRPC dans Next.js car Next.js fournit des fonctionnalités de mise en cache intégrées et des actions de serveur qui rendent ces outils superflus dans la plupart des cas.

Quel est l'avantage principal de React Query mentionné dans le script?

React Query permet de mettre en cache les données récupérées, évitant ainsi de faire de nouvelles requêtes réseau pour les mêmes données, ce qui améliore l'efficacité et les performances de l'application.

Comment Next.js gère-t-il le chargement des données sans React Query?

Next.js utilise des fonctions asynchrones dans les composants de page pour charger les données, et met en cache automatiquement les résultats des appels de récupération de données, évitant ainsi les nouvelles requêtes réseau pour les données déjà demandées.

Quelle est la différence entre l'utilisation de React Query dans une application React FEAT et dans Next.js?

Dans une application React FEAT, React Query est utilisé pour la mise en cache côté client, tandis que dans Next.js, la mise en cache est gérée par le framework lui-même, ce qui rend souvent inutile l'utilisation de React Query.

Pourquoi l'auteur pense-t-il que les actions de serveur dans Next.js sont préférables à tRPC pour les mutations de données?

Les actions de serveur dans Next.js offrent une communication type-safe entre le client et le serveur, similaire à tRPC, mais avec l'intégration native dans Next.js et sans nécessiter de boulot supplémentaire pour le typage et la validation des données.

Quels sont les problèmes que tRPC résout dans les applications React traditionnelles?

tRPC permet de faire la communication client-serveur type-safe, évite la nécessité de se souvenir des URL des points de terminaison et fournit des avertissements de TypeScript si les données ne sont pas du type attendu.

Quels sont les cas où l'auteur recommande toujours l'utilisation de React Query dans Next.js?

L'auteur recommande l'utilisation de React Query dans Next.js pour les cas où il y a besoin de récupération de données côté client après une action de l'utilisateur, comme le défilement infini, ou pour les applications qui nécessitent un soutien pour des clients en dehors de Next.js.

Quelle est la fonctionnalité de Next.js qui permet de précharger les données pour les liens avant qu'ils ne soient cliqués?

La fonctionnalité de Next.js qui permet de précharger les données est le composant Link, qui précharge les pages associées aux liens en les rendant dans la vue portante.

Comment les actions de serveur dans Next.js améliorent-elles l'expérience utilisateur sur les formulaires?

Les actions de serveur dans Next.js améliorent l'expérience utilisateur en fournissant une progression vers l'amélioration, ce qui signifie que les formulaires fonctionnent même sans JavaScript activé, et en intégrant des fonctionnalités avancées telles que l'utilisation de l'état de soumission et des UI optimistes.

Quel est l'inconvénient principal des actions de serveur mentionné dans le script?

L'inconvénient principal des actions de serveur est qu'elles ne peuvent pas être facilement utilisées en dehors de Next.js, ce qui limite leur utilisation si l'on souhaite prendre en charge des clients en dehors de Next.js.