Composants serveur React

Le principe

Par défaut, chaque composant dans l'App Router est un Server Component : il s'exécute sur le serveur, accède directement à la base de données et n'envoie aucun JavaScript au navigateur.

// Server Component — par défaut
export default async function Page() {
  const posts = await db.post.findMany();
  return posts.map((p) => <Card key={p.id} post={p} />);
}

Passer côté client

Dès qu'un composant utilise un hook ou un événement, il devient un Client Component :

"use client";

import { useState } from "react";

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>❤</button>;
}

La frontière serveur/client

• Un Server Component peut contenir un Client Component (l'inverse est impossible)
• Les props passées au client doivent être sérialisables (pas de fonctions, pas de Date)
• Chaque "use client" ajoute du JavaScript au bundle : gardez la couche interactive mince

Performance réelle

Sur le site Wabtechs, le passage aux Server Components a réduit le JavaScript initial de 68% et amélioré le LCP de 40%.

À retenir : serveur par défaut, client seulement si nécessaire. C'est la règle d'or de l'architecture React moderne.