Deux types de composants

Chaque composant que vous avez écrit jusqu'à présent dans cette section s'est exécuté dans un endroit que vous n'avez peut-être pas remarqué : sur le serveur. Il ne s'agit pas d'un mode spécial que vous avez activé : c'est le comportement par défaut, et c'est l'idée fondamentale la plus importante dans Next.js.

Il existe exactement deux types de composants, et chacun vous apporte quelque chose que l'autre ne peut pas vous offrir.

Composants serveur : le choix par défaut

• Ils s'exécutent une fois, sur le serveur, avant l'envoi de la page
• Ils peuvent être async, ce qui leur permet d'utiliser await directement dans le composant
• Ils n'envoient aucun JavaScript au navigateur : l'utilisateur télécharge le résultat, pas le code

Le problème : au moment où la page atteint le navigateur, un composant serveur est terminé. C'est une capture instantanée. Il ne peut rien retenir, réagir à un clic ou changer.

Composants `client` : s'inscrire

Lorsque vous avez besoin que la page soit interactive, vous intégrez un fichier dans le navigateur avec une seule ligne tout en haut :

'use client';

Cela marque le fichier comme un client component, et seuls les client components peuvent utiliser :

• Les Hooks : useState, useEffect, et autres
• Les gestionnaires d'événements : onClick, onChange, …
• Les API du navigateur : window, localStorage

Remarquez le compromis. Un composant serveur est rapide et silencieux mais figé. Un composant client est vivant mais son code doit être téléchargé et exécuté dans le navigateur.

La question que vous vous poserez désormais pour chaque composant n'est donc pas « lequel est-ce que je préfère ? » mais « cet élément spécifique doit-il réagir aux actions de l'utilisateur ? » Si la réponse est non (ce qui est généralement le cas), laissez-le sur le serveur.