React et Next.js : placer la bonne logique au bon endroit

Chaque interaction a son lieu

Une page de portfolio peut afficher des données depuis le serveur et ne rendre interactifs que ses filtres ou préférences. Dans l'App Router de Next.js, les pages et les layouts sont des composants serveur par défaut. Un composant client devient utile lorsqu'il a besoin d'état, d'événements ou d'API du navigateur.

Je commence donc par rendre le contenu côté serveur, puis je place la frontière client autour de la plus petite zone interactive. Une liste de projets peut être produite sur le serveur ; son filtre, lui, peut vivre dans un composant client recevant les projets comme propriétés.

Trois questions à poser

1. Cette donnée dépend-elle d'un secret ou d'une requête à la base ? Elle reste sur le serveur.
2. Cette interface réagit-elle à un clic, une saisie ou au stockage local ? Elle a besoin d'une partie cliente.
3. Le contenu doit-il rester lisible pendant le chargement ? Je prévois un état de chargement et une structure HTML utile.

Le choix ne dispense pas de vérifier l'accessibilité : un filtre doit annoncer son état, être utilisable au clavier et garder des résultats lisibles. La performance se mesure sur une page réelle, pas seulement sur la taille d'un composant.

Pour aller plus loin : Server and Client Components de Next.js.