Server ou Client Components dans Next.js : comment choisir ?

Dans l’App Router, commencez par un Server Component. Passez une partie précise de l’interface côté client seulement lorsqu’elle a besoin d’état, de gestionnaires d’événements, d’effets ou d’une API du navigateur.

Ce que change la frontière client

Les pages et layouts sont des Server Components par défaut. Ils peuvent charger des données au plus près du serveur et ne transmettent pas leur code composant au navigateur comme le ferait un composant client.

La directive 'use client' crée une frontière. Le fichier concerné, ses imports et ses dépendances deviennent alors une partie du graphe client. Il n’est pas nécessaire de répéter la directive dans chaque descendant déjà placé sous cette frontière.

Utilisez un Server Component pour…

• lire une base de données ou appeler un service avec des secrets côté serveur ;
• produire du contenu essentiellement descriptif ;
• réduire la quantité de JavaScript nécessaire à l’interactivité initiale ;
• rapprocher le chargement de données de la vue qui en dépend ;
• composer une page avec des composants clients ciblés.

Un Server Component ne peut pas utiliser directement useState, useEffect, un gestionnaire onClick ou des objets comme window et localStorage.

Utilisez un Client Component pour…

• gérer un état local avec useState ;
• répondre à un clic, une saisie ou un changement de sélection ;
• exécuter une logique de cycle de vie avec useEffect ;
• accéder aux API propres au navigateur ;
• utiliser un hook ou une bibliothèque qui exige l’environnement client.

Voici un compteur minimal :

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button type="button" onClick={() => setCount((value) => value + 1)}>
      Compteur : {count}
    </button>
  )
}

Le bouton doit être un composant client, mais le titre, l’introduction et la structure de la page peuvent rester côté serveur.

Composer les deux environnements

Un Server Component peut importer et rendre un Client Component. Il peut aussi lui transmettre des propriétés sérialisables. Évitez de passer une fonction serveur ordinaire comme propriété : les valeurs doivent pouvoir franchir la frontière de rendu, sauf mécanisme explicitement prévu par React et Next.js.

Placez la frontière cliente aussi bas que possible. Par exemple, rendez le layout, la navigation descriptive et le contenu sur le serveur, puis isolez seulement un champ de recherche interactif.

Décision rapide

Posez ces questions dans l’ordre :

1. Le composant a-t-il besoin d’un événement, d’un état, d’un effet ou d’une API navigateur ?
2. Une petite partie enfant pourrait-elle porter seule cette interactivité ?
3. Les données ou secrets doivent-ils rester exclusivement côté serveur ?
4. Les propriétés transmises au composant client sont-elles sérialisables ?

Si la première réponse est non, gardez le composant côté serveur. Si elle est oui, créez la plus petite frontière cliente utile.

Erreurs fréquentes

• placer 'use client' sur une page entière pour rendre un seul bouton interactif ;
• importer un module serveur ou une variable secrète dans le graphe client ;
• appeler window pendant un rendu serveur ;
• croire qu’un Client Component n’est jamais pré-rendu ;
• transmettre des propriétés non sérialisables à travers la frontière.

Questions fréquentes

Un Client Component est-il rendu uniquement dans le navigateur ?

Non. Next.js peut utiliser les composants clients pour pré-rendre le HTML initial, puis le navigateur les hydrate afin de rendre l’interface interactive.

use client doit-il apparaître dans tous les composants interactifs ?

Non. La directive est requise aux points d’entrée du graphe client. Les composants importés sous cette frontière en font déjà partie.

Peut-on charger des données dans un Client Component ?

Oui, mais ce n’est pas toujours le meilleur point de départ. Chargez sur le serveur lorsque cela simplifie la sécurité et le rendu, puis transmettez uniquement les données nécessaires au composant interactif.