Next.js et les React Server Components : retour d'expérience terrain
Les React Server Components (RSC) ont bouleversé notre façon de construire des applications web. Après 18 mois d'utilisation en production sur une douzaine de projets, il est temps de partager notre retour d'expérience sans filtre.
Les gains mesurés
Le gain le plus spectaculaire concerne la taille des bundles JavaScript. Sur notre projet e-commerce le plus ambitieux, le bundle client est passé de 380KB à 89KB gzippé. Le Time to Interactive a chuté de 4.2 secondes à 1.1 seconde. Ces chiffres ne mentent pas : les RSC tiennent leur promesse.
Sur un autre projet — un dashboard analytics pour 200 entreprises — les Server Components nous ont permis de fetcher les données directement côté serveur, éliminant les waterfalls de requêtes API. Le temps de chargement initial a été divisé par 3.
Le défi mental
L'architecture mentale nécessaire est le premier défi. Il faut désapprendre des réflexes acquis pendant des années. Le useState dans un composant serveur ? Erreur de compilation. Le useEffect pour fetcher des données ? Plus nécessaire. Cette transition cognitive est plus difficile qu'il n'y paraît, même pour des développeurs expérimentés.
Le plus difficile avec les Server Components, ce n'est pas d'apprendre de nouvelles APIs. C'est de désapprendre les anciennes habitudes.
La frontière client/serveur
La gestion de l'interactivité demande une réflexion en amont. Chaque composant doit être classifié : est-il purement présentationnel (serveur) ou interactif (client) ? La directive 'use client' doit être placée au bon niveau dans l'arbre de composants. Notre règle : repousser le 'use client' le plus bas possible dans l'arbre.
// BAD: tout le layout est client
'use client'
export default function Layout({ children }) {
const [open, setOpen] = useState(false)
return <div>...</div>
}
// GOOD: seul le bouton interactif est client
import { ToggleButton } from './toggle-button' // 'use client'
export default function Layout({ children }) {
return <div><ToggleButton />{children}</div>
}
Le streaming change tout
Le streaming et le Suspense sont des game changers pour l'expérience utilisateur. Au lieu d'attendre que toute la page soit prête, les sections se chargent progressivement. L'utilisateur voit du contenu immédiatement, ce qui réduit drastiquement le taux de rebond.
Les pièges à éviter
Attention aux compositions complexes. Quand un Server Component passe des props à un Client Component qui rend un Server Component enfant — les choses peuvent devenir confuses. Nous maintenons un fichier ARCHITECTURE.md dans chaque projet qui documente clairement quels composants sont serveur et quels sont client.
Notre conseil
Notre conseil : commencez par migrer vos pages les plus simples vers les RSC, mesurez les gains, puis attaquez les pages complexes. Ne tentez pas un big bang — la migration progressive est la clé du succès.
Articles similaires
Abonnez-vous a notre newsletter
Un email par mois avec nos meilleurs articles et retours d'experience. Zero spam.
Envie d'en discuter ?
Nos experts sont disponibles pour echanger sur vos projets et vos defis techniques.