React Server Components : comprendre la revolution du rendu serveur

Introduction

Les React Server Components (RSC), introduits experimentalement en decembre 2020 et stabilises avec Next.js 13 en octobre 2022, representent le changement le plus profond de l'ecosysteme React depuis les Hooks (2019).

Le principe est simple mais revolutionnaire : certains composants React s'executent uniquement sur le serveur et ne sont jamais envoyes au navigateur. Seul le HTML resultant est transmis au client, avec zero JavaScript associe.

Le probleme que les RSC resolvent

Le poids du JavaScript

Une application React classique (Client-Side Rendering) envoie tout le JavaScript au navigateur :

• Le code de React lui-meme (~40 Ko gzippe)
• Votre code applicatif
• Toutes les bibliotheques importees (formatage de dates, markdown, validation, etc.)

Pour afficher un article de blog qui utilise marked (parser Markdown, 25 Ko gzippe) et date-fns (formatage de dates, 15 Ko gzippe), le navigateur telecharge et execute ces bibliotheques alors que le serveur pourrait faire le travail en amont.

La cascade de requetes

Dans une application React classique, le processus est :

1. Le navigateur telecharge le HTML (quasi vide)
2. Il telecharge et execute le JavaScript
3. React s'initialise et lance les requetes API
4. Les donnees arrivent, React re-rend avec le contenu

Chaque etape attend la precedente : c'est la cascade (waterfall). Le resultat : un ecran blanc pendant plusieurs secondes.

Comment fonctionnent les RSC

Les deux types de composants

Avec les RSC, React distingue :

Les Server Components (par defaut dans Next.js App Router) :

• S'executent uniquement sur le serveur
• Peuvent acceder directement a la base de donnees, au systeme de fichiers, aux variables d'environnement
• N'envoient aucun JavaScript au navigateur
• Ne peuvent pas utiliser useState, useEffect, les event handlers

Les Client Components (marques avec 'use client') :

• S'executent sur le serveur (SSR) puis s'hydratent sur le client
• Peuvent utiliser les hooks React, les event handlers, le state
• Sont interactifs

Exemple concret

// app/blog/[slug]/page.tsx — Server Component (par defaut)
import { db } from '@/lib/database';
import { formatDate } from 'date-fns/format';
import { marked } from 'marked';
import { LikeButton } from './LikeButton'; // Client Component

export default async function ArticlePage({ params }) {
  // Acces direct a la base de donnees — sur le serveur uniquement
  const article = await db.article.findUnique({
    where: { slug: params.slug }
  });

  // marked et date-fns ne sont JAMAIS envoyes au navigateur
  const htmlContent = marked(article.content);
  const formattedDate = formatDate(article.publishedAt, 'dd MMMM yyyy');

  return (
    <article>
      <h1>{article.title}</h1>
      <time>{formattedDate}</time>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      <LikeButton articleId={article.id} /> {/* Interactif = Client */}
    </article>
  );
}

// app/blog/[slug]/LikeButton.tsx — Client Component
'use client';

import { useState } from 'react';

export function LikeButton({ articleId }) {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'} J'aime
    </button>
  );
}

Dans cet exemple :

• marked (25 Ko) et date-fns (15 Ko) restent sur le serveur
• Seul LikeButton (~1 Ko) est envoye au navigateur
• La page s'affiche immediatement avec le contenu HTML complet

Quand utiliser les RSC

Server Components (par defaut)

• Affichage de contenu statique ou dynamique (articles, fiches produit, tableaux de bord)
• Acces aux donnees (base de donnees, API internes)
• Utilisation de bibliotheques lourdes (markdown, syntaxe highlighting, traitement de donnees)

Client Components (explicite)

• Interactivite : clics, formulaires, animations
• Hooks d'etat : useState, useEffect, useRef
• API navigateur : localStorage, IntersectionObserver, geolocalisation

La regle pratique

Gardez les composants server par defaut. N'ajoutez 'use client' que quand vous avez besoin d'interactivite.

Poussez le 'use client' le plus bas possible dans l'arbre de composants. Un 'use client' sur un composant parent rend tous ses enfants « client » egalement.

Les limites

• Framework requis : les RSC necessitent un framework comme Next.js, Remix ou Waku pour fonctionner. React seul ne suffit pas.
• Courbe d'apprentissage : la frontiere server/client demande un changement de reflexion
• Debugging : les erreurs server et client se melangent parfois
• Ecosysteme : certaines bibliotheques ne sont pas encore compatibles RSC

Conclusion

Les React Server Components representent l'avenir du developpement React. En deplacant le travail du navigateur vers le serveur, ils ameliorent les performances, reduisent le JavaScript envoye et simplifient l'acces aux donnees. Si vous demarrez un nouveau projet React en 2026, les RSC (via Next.js App Router) devraient etre votre point de depart.