Frontend Academy · Leçon

Composants serveur et composants client

Découvrez les composants serveur React, sachez quand ajouter la directive 'use client' et apprenez à mélanger du HTML rendu côté serveur avec des îlots client interactifs.

Composants serveur et composants client est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Deux univers dans une seule application

Les composants serveur React (RSC) vous permettent de répartir un arbre entre des parties rendues par le serveur et des parties interactives côté client. Dans le routeur App de Next.js, les composants sont des composants serveur par défaut ; optez pour le client avec 'use client'.

Rôle des composants serveur

Les composants serveur s'exécutent uniquement sur le serveur. Ils peuvent : récupérer directement des données, accéder au système de fichiers, utiliser des secrets réservés au serveur et effectuer le rendu en HTML sans envoyer React au client. Ils ne peuvent pas : utiliser des crochets, gérer un état ou traiter des événements.

Rôle des composants client

Les composants client s'exécutent sur le serveur pour le SSR (HTML initial), puis sur le client pour l'interactivité. Ils peuvent utiliser useState, useEffect, des gestionnaires d'événements et les API du navigateur.

Le serveur par défaut

Dans le routeur App de Next.js, chaque composant est un composant serveur par défaut. C'est idéal : la majeure partie de votre application bénéficie d'un rendu statique.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Opter pour le client

Ajoutez 'use client' au début d'un fichier pour marquer ses composants (ainsi que leurs importations) comme composants client.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Composer serveur et client

Les composants serveur peuvent effectuer le rendu de composants client, mais les composants client ne peuvent pas importer de composants serveur. Transmettez le contenu rendu par le serveur comme enfants aux enveloppes client.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Pourquoi ce modèle est important

Des paquets JS plus petits : seuls les composants client sont envoyés au navigateur. Un accès direct à la base de données ou aux fichiers : aucune couche API n'est nécessaire pour les données en lecture seule. Un meilleur référencement et un LCP plus rapide : le HTML arrive entièrement rendu.

Règles de la limite client

Une fois qu'un fichier est marqué 'use client', tous les composants de ce fichier ainsi que tous les enfants importés deviennent des composants client. 'use client' établit une limite entre le serveur et le client.

Actions serveur

Les fonctions marquées 'use server' s'exécutent uniquement sur le serveur, mais peuvent être appelées depuis des composants client, comme avec RPC. Elles servent souvent à envoyer des formulaires et à effectuer des mutations.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

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

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Transmettre des props du serveur au client

Les props transmises du serveur au client doivent pouvoir être sérialisées au format JSON : pas de fonctions, de classes ni de dates avec une structure personnalisée. Convertissez-les avant de les transmettre.

Identifier chaque type

Examinez les importations : les crochets useState et useEffect, ainsi que les gestionnaires onClick, obligent un composant à être un composant client. Un simple affichage de données peut rester côté serveur.

Gains de performances

Les composants serveur réduisent considérablement le paquet JS. Une page composée principalement de contenu statique et de quelques widgets interactifs n'envoie que le JS des éléments interactifs, parfois 90 % de moins.

Vérification rapide

Quel crochet React est NOT autorisé dans un composant serveur Next.js ?

Récapitulatif : serveur et client

Composants serveur : s'exécutent uniquement sur le serveur, async/await est OK, sans crochets, état ni gestionnaires, avec des paquets plus petits. Composants client : activation avec 'use client', interactivité avec useState/useEffect/les événements. Le serveur peut effectuer le rendu du client ; le client ne peut pas importer le serveur, mais peut le recevoir comme enfant. Les actions serveur ('use server') servent aux mutations de type RPC.

Questions Fréquemment Posées

La leçon « Composants serveur et composants client » est-elle gratuite ?

Oui — le texte complet de « Composants serveur et composants client » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composants serveur et composants client » ?

Découvrez les composants serveur React, sachez quand ajouter la directive 'use client' et apprenez à mélanger du HTML rendu côté serveur avec des îlots client interactifs. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Composants serveur et composants client » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy