Quelle est la différence entre un React Server Component et un Client Component, et comment décidez-vous lequel utiliser ?

Les Server Components s'exécutent uniquement sur le serveur, au moment de la requête ou du build, et n'envoient jamais leur code au navigateur ; ils peuvent attendre une requête base de données directement mais ne peuvent pas utiliser d'état, d'effets ni de gestionnaires d'événements. Les Client Components sont marqués par la directive use client, s'hydratent dans le navigateur et gèrent l'interactivité. Prenez le serveur par défaut, et poussez la frontière client aussi bas que possible dans l'arbre.

Ma façon de voir les choses, c'est que les Server Components servent à récupérer des données et à produire du markup, et les Client Components à tout ce que l'utilisateur touche. Un Server Component tourne sur le serveur, donc je peux attendre une requête directement dedans, et ni ce code ni ses dépendances ne se retrouvent dans le bundle navigateur. La contrepartie, c'est pas de useState, pas de useEffect, pas de onClick. Dès que j'ai besoin de l'un d'eux, j'ajoute use client en haut du fichier, et tout ce qu'il importe rejoint aussi le bundle client. Donc mon défaut, c'est le serveur, et je pousse la frontière le plus bas possible. Sur mon dernier projet, j'avais un tableau de bord où seuls le menu déroulant de filtre et l'infobulle du graphique étaient interactifs, donc ça faisait deux petits composants client, et le reste de la page, y compris un moteur de rendu markdown assez lourd, restait côté serveur. Ce qui piège les gens, c'est que les props qui franchissent la frontière doivent être sérialisables, donc vous ne pouvez pas faire descendre une fonction. Le motif que j'utilise à la place, c'est de passer des enfants rendus côté serveur dans une coquille client.