Skip to content
Learni
Voir tous les tutoriels
Frontend

Comment maîtriser React Server Components en 2026

18 minEXPERT
ReactPerformanceNext.js
Read in English

Introduction

Les Server Components transforment la façon de construire des interfaces React en 2026. Ils permettent d'exécuter du code directement sur le serveur, réduisant drastiquement la taille du bundle client et améliorant les performances. Ce tutoriel expert vous guide à travers l'implémentation complète de React 19, du streaming aux hooks avancés comme use et useTransition. Vous apprendrez à combiner RSC avec le rendu concurrent pour des expériences utilisateur fluides, même sur des données volumineuses.

Prérequis

  • Node.js 20+
  • Next.js 15.2+
  • TypeScript 5.5+
  • Connaissances solides de React et des hooks

Initialisation du projet

terminal
npx create-next-app@latest . --yes
npm install react@19 react-dom@19

Cette commande initialise un projet Next.js configuré pour React 19. Le flag --yes accepte toutes les options par défaut incluant TypeScript et Tailwind.

Configuration du layout racine

app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'RSC Expert',
  description: 'Application React Server Components 2026',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  );
}

Le layout racine est un Server Component par défaut. Il ne contient aucun hook client et s'exécute uniquement sur le serveur.

Composant serveur avec fetch

app/dashboard/page.tsx
async function getUsers() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', {
    cache: 'force-cache',
  });
  return res.json();
}

export default async function Dashboard() {
  const users = await getUsers();
  return (
    <ul>
      {users.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Ce Server Component effectue un appel API côté serveur. Le cache force-cache garantit une performance optimale en production.

Streaming avec Suspense

app/dashboard/loading.tsx
export default function Loading() {
  return <div>Chargement des utilisateurs...</div>;
}

Next.js affiche automatiquement ce composant pendant le chargement des Server Components. Cela active le streaming natif.

Hook useTransition avancé

app/components/filter.tsx
'use client';
import { useState, useTransition } from 'react';

export default function Filter() {
  const [filter, setFilter] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (value: string) => {
    startTransition(() => {
      setFilter(value);
    });
  };

  return (
    <input
      value={filter}
      onChange={(e) => handleChange(e.target.value)}
      placeholder="Filtrer..."
    />
  );
}

useTransition permet de marquer les mises à jour comme non urgentes, évitant les blocages de l'interface pendant les mises à jour d'état coûteuses.

Bonnes pratiques

  • Toujours utiliser le cache approprié (force-cache ou revalidate)
  • Préférer les Server Components par défaut
  • Isoler les parties interactives dans des Client Components
  • Utiliser Suspense pour chaque fetch indépendant
  • Valider les données avec Zod côté serveur

Erreurs courantes

  • Utiliser des hooks dans des Server Components
  • Oublier le flag 'use client' sur les composants interactifs
  • Faire des fetch sans gestion d'erreur
  • Négliger la stratégie de revalidation des données

Pour aller plus loin

Approfondissez ces concepts avec nos formations React avancées.