Développement
Next.js et les Server Components : comprendre le changement
20 janvier 2026
7 min de lecture
Synthèse de veille
Les Server Components changent la manière de penser une app React. Tour d'horizon des bénéfices et des pièges.
Les React Server Components introduits par Next.js révolutionnent l'architecture front. Comprendre leur fonctionnement est devenu essentiel pour développer en React moderne.
01Le principe
Un Server Component s'exécute uniquement sur le serveur. Le HTML est envoyé au client, sans JavaScript additionnel pour ce composant. Cela réduit la taille du bundle envoyé au navigateur.
Pour rendre un composant interactif (clic, input, hooks), il faut explicitement le marquer comme Client Component avec la directive 'use client'.
02Les pièges
Plusieurs erreurs classiques en passant à l'App Router :
- →Utiliser un hook React dans un Server Component (useState, useEffect) → erreur
- →Passer une fonction en prop d'un Server à un Client Component → erreur de sérialisation
- →Confondre les deux mondes en oubliant 'use client'
- →Importer un Client Component dans un Server : OK. L'inverse : KO
Points clés à retenir
- 01Les Server Components ne sont pas envoyés au client
- 02Ils peuvent accéder directement à la BDD
- 03Aucun hook React n'est disponible côté serveur
- 04Les props passées doivent être sérialisables
- 05Le streaming améliore les performances perçues