React 19 : Server Components, Actions et nouvelles API — Guide complet

React 19 représente un changement de paradigme aussi important que l'introduction des Hooks en 2019. Avec les Server Components, les Server Actions, le React Compiler et le hook use(), React redéfinit la frontière entre client et serveur.

Cet article vous guide à travers chaque nouveauté avec des exemples concrets et des recommandations pour l'adoption en production.

Les Server Components s'exécutent exclusivement sur le serveur. Leur code JavaScript n'est jamais envoyé au navigateur, ce qui réduit drastiquement la taille du bundle.

// app/posts/page.tsx — Server Component (par défaut)
import { db } from '@/lib/db';

export default async function PostsPage() {
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' }
  });

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Les avantages mesurés sur nos projets :

• -60% de JavaScript envoyé au client en moyenne
• Accès direct aux données sans API intermédiaire
• Zéro hydratation pour les composants serveur
• SEO optimal : le HTML est généré côté serveur

Les Server Actions permettent de définir des fonctions serveur directement dans vos composants :

'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  await db.post.create({
    data: { title, content, authorId: getCurrentUserId() }
  });
  
  revalidatePath('/posts');
  redirect('/posts');
}

// Utilisation dans un Client Component
'use client';
import { createPost } from './actions';

export function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Publier</button>
    </form>
  );
}

Les Server Actions fonctionnent avec et sans JavaScript côté client (progressive enhancement), ce qui garantit une expérience fonctionnelle même en cas de chargement lent.

Le hook use() permet de consommer des promesses et des contextes directement :

import { use, Suspense } from 'react';

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // ← Résout la promesse !
  return <div>Bonjour, {user.name}</div>;
}

// Utilisation
<Suspense fallback={<Loading />}>
  <UserProfile userPromise={fetchUser(id)} />
</Suspense>

Contrairement à useEffect + useState, use() intègre nativement le streaming et Suspense pour une UX optimale.

Le React Compiler (anciennement React Forget) analyse votre code à la compilation et ajoute automatiquement les mémoïsations nécessaires :

// Avant : mémoïsation manuelle
function ProductList({ products, filter }) {
  const filtered = useMemo(
    () => products.filter(p => p.category === filter),
    [products, filter]
  );
  const handleClick = useCallback((id) => {
    addToCart(id);
  }, []);
  // ...
}

// Après : le compilateur gère tout
function ProductList({ products, filter }) {
  const filtered = products.filter(p => p.category === filter);
  const handleClick = (id) => addToCart(id);
  // ... Le compilateur ajoute les optimisations
}

Résultat : un code plus simple, plus lisible, et tout aussi performant. Nous recommandons d'activer le React Compiler sur tous les nouveaux projets Next.js.

Notre plan d'adoption recommandé :

1. Mettez à jour vers Next.js 15+ qui supporte nativement React 19
2. Convertissez vos pages en Server Components — supprimez les 'use client' quand le code n'utilise pas de hooks d'état
3. Adoptez les Server Actions pour les formulaires et mutations
4. Activez le React Compiler et supprimez les useMemo/useCallback manuels
5. Implémentez Suspense boundaries pour le streaming SSR

ITCE accompagne les équipes frontend dans cette transition. Découvrez notre expertise développement web.