Le nouveau paradigme de React
Avec React 19 et Next.js 16, le modèle de rendu a fondamentalement changé. Les Server Components sont désormais le défaut, et comprendre quand utiliser un Client Component est crucial.
Server Components
Les Server Components s'exécutent uniquement sur le serveur. Ils n'envoient aucun JavaScript au navigateur, ce qui réduit drastiquement la taille du bundle.
Quand utiliser un Server Component
- Fetch de données depuis une base de données ou une API
- Accès à des variables d'environnement sensibles
- Rendu de contenu statique ou semi-statique
- Composants qui n'ont pas besoin d'interactivité
Client Components
Les Client Components sont marqués avec la directive "use client" en haut du fichier. Ils s'exécutent dans le navigateur et ont accès aux hooks React.
Quand utiliser un Client Component
- Interactivité (onClick, onChange, etc.)
- Hooks React (useState, useEffect, useContext)
- APIs du navigateur (localStorage, IntersectionObserver)
- Animations complexes (Framer Motion)
Le pattern de composition
La clé est de pousser les Client Components le plus bas possible dans l'arbre de composants. Gardez les layouts et les pages comme Server Components, et encapsulez l'interactivité dans des sous-composants dédiés.
// page.tsx (Server Component)
import { InteractiveCard } from './interactive-card' // Client Component
export default async function Page() {
const data = await fetchData() // runs on server
return <InteractiveCard data={data} />
}Conclusion
Maîtriser la frontière entre Server et Client Components est la compétence la plus importante pour un développeur Next.js en 2026.