React 19 : Server Components et Actions

La révolution React 19

React 19, sorti en décembre 2024, est la mise à jour la plus significative depuis l'introduction des hooks en 2019. Elle apporte un changement de paradigme fondamental : les composants React peuvent désormais s'exécuter côté serveur, lire des bases de données directement, et soumettre des formulaires sans écrire une seule ligne d'API REST. Pour un développeur junior, comprendre cette évolution est désormais essentiel.

Ce qui change avec React 19

Prérequis

Pour utiliser React 19 avec toutes ses fonctionnalités (RSC, Server Actions), vous avez besoin d'un framework qui intègre un serveur Node.js. Les deux options principales :

• Next.js 14+ — intégration native, la plus répandue en production
• Remix 2+ — aussi prise en charge complète
• React seul (Vite) — uniquement les hooks React 19, pas les RSC

React Server Components (RSC)

Un React Server Component est un composant qui s'exécute exclusivement sur le serveur Node.js. Il peut lire des fichiers, interroger une base de données, accéder à des variables d'environnement secrètes — sans que ce code ne soit jamais envoyé au navigateur. Le résultat (HTML + JSON sérialisé) est streamé vers le client.

Exemple concret : liste de produits depuis une BDD

// app/products/page.tsx (Next.js App Router)
// Par défaut, tous les fichiers dans app/ sont des Server Components
// PAS besoin de 'use client' — c'est le comportement par défaut

import { db } from '@/lib/database'; // Import direct BDD ✅

// async/await directement dans le composant — impossible avant React 19
async function ProductList() {
  // Requête BDD directe — le code ne part JAMAIS au navigateur
  const products = await db.query('SELECT * FROM products WHERE active = true');

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          <h2>{product.name}</h2>
          <p>Prix : {product.price} €</p>
        </li>
      ))}
    </ul>
  );
}

export default ProductList;

Avantages clés des Server Components

// AVANT React 19 (composant client classique)
// Le code de fetch ET la logique métier sont envoyés au navigateur
'use client';
import { useEffect, useState } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 1. Appel API depuis le navigateur
    // 2. API appelle la BDD
    // 3. BDD retourne les données
    // 4. API sérialise et retourne JSON
    // 5. Composant met à jour le state
    fetch('/api/products')
      .then(r => r.json())
      .then(data => { setProducts(data); setLoading(false); });
  }, []);

  if (loading) return <p>Chargement...</p>;
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

// AVEC React 19 Server Component
// Plus besoin d'API route, de state, d'useEffect
// Zéro JS envoyé au navigateur pour ce composant

async function ProductList() {
  // Accès BDD direct, sécurisé côté serveur
  const products = await fetchProductsFromDB();
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

// Bénéfices mesurables :
// ✅ Bundle JS réduit (code serveur exclu)
// ✅ Pas de waterfall réseau client
// ✅ Données fraîches à chaque requête
// ✅ Clés API et secrets jamais exposés

Composants Client vs Serveur

La règle de base est simple : tout composant est un Server Component par défaut dans le App Router de Next.js. Pour en faire un Client Component, ajoutez 'use client' en première ligne.

Pattern de composition Server + Client

// app/dashboard/page.tsx — Server Component (pas de 'use client')
// Récupère les données côté serveur, passe au composant client

import { UserDashboard } from '@/components/UserDashboard'; // Client Component
import { getUserData } from '@/lib/user-service';           // Service BDD

// Le composant page est Server, getUserData s'exécute côté serveur
async function DashboardPage() {
  // Récupère l'utilisateur depuis la BDD (côté serveur)
  const user = await getUserData(); // Pas besoin d'API route !

  // Passe les données au Client Component via props (sérialisées en JSON)
  return <UserDashboard initialUser={user} />;
}

export default DashboardPage;

// components/UserDashboard.tsx — Client Component
'use client'; // Directif obligatoire pour activer les hooks

import { useState } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

// Reçoit les données initiales du Server Component parent
export function UserDashboard({ initialUser }: { initialUser: User }) {
  // useState est autorisé ici car 'use client'
  const [user, setUser] = useState(initialUser);
  const [editing, setEditing] = useState(false);

  return (
    <div>
      <h1>Bonjour, {user.name}</h1>
      {editing ? (
        <EditForm user={user} onSave={setUser} />
      ) : (
        <button onClick={() => setEditing(true)}>Modifier</button>
      )}
    </div>
  );
}

Server Actions : mutations sans API

Les Server Actions sont des fonctions asynchrones qui s'exécutent côté serveur mais peuvent être appelées depuis le client. Elles simplifient radicalement la soumission de formulaires et les mutations de données — plus besoin de créer une route API dédiée pour chaque opération.

Formulaire de contact avec Server Action

// app/contact/actions.ts — Server Actions dans un fichier dédié
'use server'; // Marque toutes les fonctions comme Server Actions

import { db } from '@/lib/database';
import { revalidatePath } from 'next/cache';

// Cette fonction s'exécute sur le serveur, jamais dans le navigateur
export async function submitContactForm(formData: FormData) {
  // FormData est automatiquement passé par le formulaire HTML
  const name    = formData.get('name')    as string;
  const email   = formData.get('email')   as string;
  const message = formData.get('message') as string;

  // Validation côté serveur (jamais dépendant du client)
  if (!name || !email || !message) {
    return { error: 'Tous les champs sont obligatoires' };
  }

  // Insert direct en BDD (pas d'API intermédiaire !)
  await db.query(
    'INSERT INTO contacts (name, email, message) VALUES (?, ?, ?)',
    [name, email, message]
  );

  // Invalide le cache de la page pour afficher les nouvelles données
  revalidatePath('/admin/contacts');

  return { success: true };
}

// app/contact/page.tsx — Formulaire qui utilise la Server Action
import { submitContactForm } from './actions';

// Ce formulaire fonctionne MÊME SANS JavaScript côté client !
export default function ContactPage() {
  return (
    <main>
      <h1>Contactez-nous</h1>

      {/* action={submitContactForm} : appelle directement la Server Action */}
      <form action={submitContactForm}>
        <div>
          <label htmlFor="name">Nom</label>
          <input id="name" name="name" type="text" required />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" name="email" type="email" required />
        </div>
        <div>
          <label htmlFor="message">Message</label>
          <textarea id="message" name="message" required></textarea>
        </div>
        <button type="submit">Envoyer</button>
      </form>
    </main>
  );
}

Server Action depuis un Client Component

// components/AddToCartButton.tsx — Client Component qui appelle une Server Action
'use client';

import { useState } from 'react';
import { addToCart } from '@/app/cart/actions'; // Import d'une Server Action

interface Props {
  productId: number;
}

export function AddToCartButton({ productId }: Props) {
  const [pending, setPending] = useState(false);
  const [message, setMessage] = useState('');

  const handleClick = async () => {
    setPending(true);
    try {
      // Appel de la Server Action — s'exécute sur le serveur
      const result = await addToCart(productId);
      setMessage(result.success ? 'Ajouté au panier !' : 'Erreur');
    } finally {
      setPending(false);
    }
  };

  return (
    <div>
      <button onClick={handleClick} disabled={pending}>
        {pending ? 'Ajout...' : 'Ajouter au panier'}
      </button>
      {message && <p aria-live="polite">{message}</p>}
    </div>
  );
}

Nouveaux hooks : useFormStatus et useOptimistic

useFormStatus : état du formulaire parent

useFormStatus permet à un composant enfant de connaître l'état de soumission du formulaire qui le contient — sans prop drilling.

// components/SubmitButton.tsx
'use client';

import { useFormStatus } from 'react-dom'; // Importé depuis react-dom

// Composant réutilisable pour tous les boutons de soumission
export function SubmitButton({ label }: { label: string }) {
  // pending = true quand la Server Action est en cours d'exécution
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {/* Affiche un état de chargement pendant la soumission */}
      {pending ? 'Envoi en cours...' : label}
    </button>
  );
}

// app/contact/page.tsx — Utilisation avec Server Action
import { submitContactForm } from './actions';
import { SubmitButton } from '@/components/SubmitButton';

export default function ContactPage() {
  return (
    <form action={submitContactForm}>
      <input name="email" type="email" required />
      {/* SubmitButton "sait" automatiquement que le formulaire est en cours */}
      <SubmitButton label="S'inscrire" />
    </form>
  );
}

useOptimistic : mises à jour optimistes

useOptimistic permet d'afficher immédiatement le résultat attendu d'une action avant que le serveur ait confirmé. L'interface reste réactive même sur connexion lente.

// components/TodoList.tsx
'use client';

import { useOptimistic, useState } from 'react';
import { addTodo } from '@/app/todos/actions';

interface Todo {
  id: number;
  text: string;
  sending?: boolean; // Marqueur d'état optimiste
}

export function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
  const [todos, setTodos] = useState<Todo[]>(initialTodos);

  // useOptimistic(état, (étatActuel, valeurOptimiste) => nouvelÉtat)
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (currentTodos, newTodoText: string) => [
      ...currentTodos,
      // Ajoute le todo avec un ID temporaire et un flag "sending"
      { id: Date.now(), text: newTodoText, sending: true },
    ]
  );

  const handleAddTodo = async (formData: FormData) => {
    const text = formData.get('todo') as string;

    // 1. Met à jour l'UI immédiatement (optimiste)
    addOptimisticTodo(text);

    // 2. Envoie au serveur en arrière-plan
    const savedTodo = await addTodo(text);

    // 3. Met à jour l'état réel avec la réponse serveur
    setTodos(prev => [...prev, savedTodo]);
  };

  return (
    <div>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.sending ? 0.6 : 1 }}>
            {todo.text}
            {todo.sending && <span> (envoi...)