React Server Components : Comprendre le nouveau paradigme

Les React Server Components (RSC) représentent une évolution majeure dans l'écosystème React. Introduits avec Next.js 13, ils changent fondamentalement notre approche du développement d'applications web.

Qu'est-ce qu'un Server Component ?

Un Server Component est un composant React qui s'exécute uniquement sur le serveur. Contrairement aux composants traditionnels, ils ne sont jamais envoyés au client.

// Ceci est un Server Component par défaut dans Next.js 13+
async function BlogPosts() {
  const posts = await fetch('https://api.example.com/posts');
  const data = await posts.json();
  
  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Les avantages

1. Réduction du JavaScript côté client

Les Server Components n'ajoutent aucun JavaScript au bundle client. Cela signifie :

• Des temps de chargement plus rapides
• Une meilleure performance sur les appareils moins puissants
• Un meilleur score Core Web Vitals

2. Accès direct aux ressources backend

Vous pouvez accéder directement à :

• Les bases de données
• Le système de fichiers
• Les API internes

3. Streaming et Suspense

Les RSC supportent nativement le streaming, permettant d'afficher progressivement le contenu.

Quand utiliser un Client Component ?

Utilisez "use client" quand vous avez besoin de :

• Interactivité : onClick, onChange, etc.
• Hooks d'état : useState, useEffect, useReducer
• APIs navigateur : localStorage, window, etc.

"use client";

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Compteur : {count}
    </button>
  );
}

Pattern de composition

Le pattern recommandé est de garder les Server Components comme parents et d'y insérer les Client Components enfants :

// ServerComponent.jsx
import ClientButton from './ClientButton';

async function ProductPage({ id }) {
  const product = await getProduct(id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ClientButton productId={id} />
    </div>
  );
}

Conclusion

Les React Server Components représentent l'avenir du développement React. Bien qu'ils nécessitent un changement de mentalité, les bénéfices en termes de performance et d'expérience développeur sont significatifs.

Dans un prochain article, nous explorerons des patterns avancés et des cas d'usage concrets.