Maîtriser les React Server Components en 2026

Les React Server Components (RSC) ont fondamentalement changé la façon dont nous construisons des applications React. En déplaçant la logique de rendu vers le serveur, nous pouvons réduire considérablement le bundle JavaScript envoyé au client, ce qui se traduit par des temps de chargement plus rapides et une meilleure expérience utilisateur. Dans cet article, nous explorerons les modèles avancés et les meilleures pratiques pour tirer parti des RSC en 2026.

Que sont les Server Components ?

Traditionnellement, les composants React étaient rendus entièrement sur le client (CSR) ou pré-rendus sur le serveur sous forme de HTML (SSR) puis hydratés sur le client. Les Server Components nous permettent de rendre des composants exclusivement sur le serveur. Leur code n'est jamais envoyé au navigateur.

Les Avantages

1. Taille de Bundle Nulle : Les dépendances utilisées dans les Server Components (comme les analyseurs de markdown ou les bibliothèques de dates lourdes) restent sur le serveur.
2. Accès Direct au Backend : Vous pouvez interroger votre base de données directement dans votre composant sans exposer de points de terminaison d'API.
3. Code Splitting Automatique : Les composants clients importés côté serveur sont automatiquement divisés en code.

Modèle de Récupération de Données

Avec les RSC, vous pouvez rendre vos composants async et attendre les données directement.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Utilisateurs</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense pour le Streaming

Étant donné que la récupération des données peut être lente, enveloppez vos composants dans <Suspense> pour afficher une interface utilisateur de secours immédiatement pendant le chargement des données.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>Mes Utilisateurs</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Combiner les Server et Client Components

L'un des aspects les plus déroutants est de savoir comment combiner les composants serveur et client.

Règle d'or : Les Server Components peuvent importer des Client Components. Les Client Components ne peuvent pas importer directement des Server Components. Cependant, vous pouvez passer un Server Component comme children à un Client Component.

Le Modèle "Children"

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Compteur : {count}
      {children} {/* Cela peut être un Server Component ! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* Cela fonctionne parfaitement */}
    </ClientWrapper>
  );
}

Pièges Courants

1. Utilisation du Context dans les Server Components : Le Context est un concept côté client. Si vous devez partager des données côté serveur, passez-les en tant que props ou utilisez un cache spécialisé à la portée de la requête.
2. Ajout de Gestionnaires d'Événements : Vous ne pouvez pas ajouter onClick ou onChange à un Server Component. Cette logique appartient à un nœud feuille générique Client Component.

Conclusion

Les React Server Components ne sont pas seulement une fonctionnalité ; c'est un changement de paradigme. En comprenant la frontière entre le serveur et le client, vous pouvez créer des applications à la fois hautement interactives et incroyablement rapides.