Explication par Addy Osmani du Next.js App Router et des React Server Components

• Addy Osmani fait partie de l’équipe Google Chrome et maîtrise bien les frameworks et bibliothèques, au point d’avoir assuré la promotion de projets comme TodoMVC et HNPWA
• RSC ?
  • Intègre la récupération de données comme élément essentiel de la composition de l’arbre de composants, ce qui permet l’attente au plus haut niveau ainsi que la sérialisation des données côté serveur
  • Les RSC sont des composants React stateless exécutés sur le serveur, offrant une expérience qui facilite la réutilisation de code maintenable entre composants serveur et client (knitting)
  • Permettent un routage proche du SPA sur une architecture similaire à un MPA
  • L’implémentation réelle (et ce qui est fourni) variera selon les frameworks
  • L’équipe React estime qu’ils seront largement adoptés et auront un impact sur l’écosystème. Dan, de l’équipe React, compare les Server Components à l’ossature du flux de données d’une application, les Client Components étant la chair autour de ces os
• Comment le Next.js App Router et les Server Components s’articulent-ils ?
  • Support des RSC à partir de Next.js 13+
  • Les composants dans le répertoire app prennent automatiquement en charge les RSC
  • Les RSC tirent parti de l’infrastructure et des dépendances côté serveur pour offrir de meilleures performances et des bundles plus légers
  • Le Next.js App Router combine rendu serveur et rendu client pour améliorer progressivement l’application et rendre l’expérience utilisateur plus naturelle. Il est possible d’utiliser explicitement des Client Components (use client) et de les placer de façon entremêlée dans le même arbre de composants
  • De bons retours d’expérience émergent autour de l’utilisation du Next.js App Router
• Il y a aussi divers autres sujets liés à cela, donc n’hésitez pas à lire l’article.