Tendances React en 2025

 (robinwieruch.de)
16 points par xguru 2025-03-24 | 1 commentaires | Partager sur WhatsApp
  • React évolue vers un framework full-stack qui efface la frontière entre client et serveur
  • La position dominante de Next.js s’affaiblit, tandis que TanStack Start et React Router émergent comme concurrents
  • React renforce ses fonctionnalités autour des formulaires, de la gestion d’état, des composants serveur et de l’adoption de l’IA
  • Les développeurs React vont devoir se familiariser avec un environnement full-stack

React Server Components (RSC)

  • React Server Components (RSC) est une fonctionnalité qui réduit la taille des bundles JavaScript côté client et optimise les performances
    • Première annonce : 21 décembre 2020
    • Première implémentation : introduction de l’App Router dans Next.js 13 (2022)
    • Un état plus stable atteint avec Next.js 15 (2024)
    • React Router et TanStack Start devraient eux aussi adopter bientôt les RSC
  • Fonctionnement des RSC
    • Exécutés une seule fois sur le serveur, puis seul le résultat du rendu est envoyé au client
    • Réduction de la quantité de JavaScript côté client
    • Accès possible à la base de données et aux API depuis le serveur (sécurité renforcée)

React Server Functions (RSF)

  • React Server Actions (RSA) → une évolution des RSC, permettant de modifier et mettre à jour les données sur le serveur
    • Exécution de fonctions serveur via un modèle d’appel de procédure distante (RPC), sans définir de routes API
    • Utilisation de la directive use server
  • React Server Functions (RSF)
    • En septembre 2024, l’équipe React a présenté les RSF comme un concept plus large englobant les RSA
    • Peuvent fonctionner à la fois dans les RSC et dans les composants client
    • Incluent à la fois la lecture et la modification des données
  • Implémentation prévue dans Next.js, TanStack Start et React Router

Améliorations des formulaires React

  • Dans React 19, les fonctionnalités liées aux formulaires ont été largement améliorées
    • L’attribut action de <form> permet d’appeler directement des server actions
    • Ajout de nouveaux hooks
      • useFormStatus, useOptimistic, useActionState
    • Amélioration de la gestion des états de formulaires complexes
  • Compatibles avec les bibliothèques existantes
    • Les bibliothèques existantes comme React Hook Form restent utilisables
    • Les capacités natives de React pour gérer les formulaires deviennent plus puissantes et plus flexibles

Library vs Framework (bibliothèque vs framework)

  • React dépasse désormais le simple cadre d’une bibliothèque pour adopter les caractéristiques d’un framework
    • Prise en charge du rendu client (CSR), du rendu côté serveur (SSR), de la génération statique (SSG) et de la régénération statique incrémentale (ISR)
    • L’utilisation des fonctionnalités RSC et RSF nécessite un framework spécifique (par ex. Next.js)
  • Un choix nécessaire selon les besoins du projet
    • Application cliente simple → React seul peut suffire
    • Fonctionnalités côté serveur requises → besoin d’un framework comme Next.js, TanStack Start ou React Router

Intensification de la concurrence entre frameworks React

  • Next.js reste le framework le plus populaire
  • TanStack Start et React Router ont de fortes chances d’émerger comme concurrents en 2025
    • TanStack Start → nouveau framework basé sur TanStack Router
    • React Router → une évolution de Remix, avec un positionnement renforcé comme framework
  • Les deux frameworks devraient prendre en charge les RSC et les RSF

Full-Stack React

  • Avec l’introduction de fonctionnalités centrées sur le serveur, React évolue vers des applications full-stack
    • Accès possible à la base de données via les RSC et les RSF
    • Nécessité d’une infrastructure back-end pour l’authentification, les autorisations, le cache, etc.
    • Simplification également de la communication entre client et serveur
  • Les possibilités de créer des applications d’IA basées sur React augmentent

La « shadcnification » de React

  • Shadcn UI → s’impose comme bibliothèque UI par défaut pour React, à l’image de Tailwind CSS
    • Fournit des composants préstylés
    • Personnalisable
  • De nouvelles approches UI pourraient émerger
    • Les projets ont actuellement tendance à tous se ressembler

React et l’IA

  • Hausse de la génération de code React par l’IA
    • Génération automatique de code React via des outils d’IA (comme v0)
  • Hausse de la création d’applications assistées par l’IA
    • Prise en charge par Vercel AI SDK, LangChain, etc.

Biome (ex-Rome)

  • Résout les problèmes d’intégration entre ESLint et Prettier
  • Outil rapide et cohérent basé sur Rust
    • Lauréat du prix de 20 000 $ de Prettier (2023)
  • Biome → a de fortes chances de s’imposer comme la toolchain React de nouvelle génération

React Compiler

  • React Compiler → outil d’automatisation de l’optimisation des performances
    • Gère automatiquement useCallback, useMemo et memo
    • Plus besoin de mémoïsation manuelle
    • Une version bêta est disponible dans React 19

À lire aussi