React Server Components : ce qui change vraiment

On confond souvent React Server Components (RSC) et rendu côté serveur (SSR). Le SSR produit du HTML à partir de composants qui seront ensuite hydratés dans le navigateur. Un Server Component, lui, ne part jamais dans le navigateur : son code reste sur le serveur et seul son résultat sérialisé est envoyé au client. Comprendre cette différence, c’est comprendre ce qui change vraiment.

Moins de JavaScript envoyé

Une librairie de formatage de dates, un parseur Markdown ou un client SQL utilisés dans un Server Component n’alourdissent plus le bundle. Sur une page de contenu, le gain peut atteindre plusieurs centaines de kilo-octets. Moins de JavaScript à hydrater, c’est aussi moins de tâches longues sur le thread principal, et donc une meilleure réactivité au clic (voir « INP : optimiser la réactivité perçue de son site »).

// app/articles/page.tsx — a Server Component by default
import { db } from '@/lib/db';

export default async function Articles() {
    const articles = await db.article.findMany();
    return (
        <ul>
            {articles.map(a => <li key={a.id}>{a.title}</li>)}
        </ul>
    );
}

La frontière "use client"

La directive "use client" ne marque pas un composant isolé : elle marque un point d’entrée. Tout ce qu’il importe devient du code client. La bonne pratique consiste donc à pousser cette frontière le plus bas possible dans l’arbre, sur les petits composants interactifs (bouton, formulaire, carrousel).

• Les props passées d’un Server à un Client Component doivent être sérialisables.
• Un Client Component peut recevoir des Server Components via children.
• Les hooks (useState, useEffect) restent réservés aux Client Components.

Charger les données sans cascade

Un Server Component peut attendre ses données directement avec await. Le piège : enchaîner les await crée une cascade où chaque requête attend la précédente. Les requêtes indépendantes se lancent en parallèle :

export default async function Dashboard() {
    const [user, stats] = await Promise.all([getUser(), getStats()]);
    return <Summary stats={stats} user={user} />;
}

Afficher vite avec Suspense

Une partie lente de la page n’a pas à bloquer tout le reste. Enveloppée dans Suspense, elle est remplacée par un contenu d’attente, puis envoyée en streaming dès qu’elle est prête :

<Suspense fallback={<p>Loading suggestions…</p>}>
    <Suggestions />
</Suspense>

Les pièges courants

• Passer un objet entier en props à un Client Component : il est sérialisé et envoyé au navigateur. Ne transmettre que les champs utiles.
• Importer par erreur du code serveur dans un Client Component : le paquet server-only fait échouer le build si cela arrive.
• Exposer un secret : seules les variables d’environnement préfixées par NEXT_PUBLIC_ sont envoyées au client, les autres restent sur le serveur.
• Passer une fonction en props : impossible, sauf s’il s’agit d’une Server Function déclarée avec "use server".

En résumé

Les RSC déplacent le curseur : par défaut tout est serveur, et l’interactivité devient un choix explicite. C’est un changement de réflexe plus qu’un changement d’API.