Composants Client

Les composants Client vous permettent d'écrire une interface utilisateur interactive qui peut être affichée côté client au moment de la requête. Dans Next.js, le rendu côté client est optionnel, ce qui signifie que vous devez explicitement décider quels composants React doit afficher côté client.

Cette page explique comment fonctionnent les composants Client, comment ils sont affichés et quand vous pourriez les utiliser.

Avantages du rendu côté client

Il y a plusieurs avantages à effectuer le rendu côté client, notamment :

• Interactivité : Les composants Client peuvent utiliser l'état, les effets et les écouteurs d'événements, ce qui signifie qu'ils peuvent fournir un retour immédiat à l'utilisateur et mettre à jour l'interface utilisateur.
• API navigateur : Les composants Client ont accès aux API du navigateur, comme la géolocalisation ou le localStorage, vous permettant de construire des interfaces utilisateur pour des cas d'utilisation spécifiques.

Utilisation des composants Client dans Next.js

Pour utiliser des composants Client, vous pouvez ajouter la directive React "use client" en haut d'un fichier, avant vos imports.

"use client" est utilisé pour déclarer une frontière entre les modules de composants Serveur et Client. Cela signifie qu'en définissant "use client" dans un fichier, tous les autres modules importés, y compris les composants enfants, sont considérés comme faisant partie du bundle client.

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>Cliquez ici</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>Cliquez ici</button>
    </div>
  )
}

Le diagramme ci-dessous montre des composants imbriqués. Utiliser onClick et useState dans toggle.js causera une erreur si la directive "use client" n'est pas définie. En effet, par défaut, les composants sont affichés côté serveur où ces API ne sont pas disponibles. En définissant la directive "use client" dans toggle.js, vous pouvez indiquer à React d'afficher le composant et ses enfants côté client, où les API sont disponibles.

Définition de plusieurs points d'entrée use client :

Vous pouvez définir plusieurs points d'entrée "use client" dans votre arborescence de composants React. Cela vous permet de diviser votre application en plusieurs bundles (ou branches) client.

Cependant, "use client" n'a pas besoin d'être défini dans chaque composant qui doit être affiché côté client. Une fois la frontière définie, tous les composants enfants et modules importés sont considérés comme faisant partie du bundle client.

Comment les composants Client sont-ils affichés ?

Dans Next.js, les composants Client sont affichés différemment selon que la requête fait partie d'un chargement de page complet (une visite initiale de votre application ou un rechargement de page déclenché par un rafraîchissement du navigateur) ou d'une navigation ultérieure.

Chargement de page complet

Pour optimiser le chargement initial de la page, Next.js utilise les API de React pour afficher un aperçu HTML statique côté serveur pour les composants Client et Serveur. Cela signifie que lorsque l'utilisateur visite votre application pour la première fois, il verra immédiatement le contenu de la page, sans avoir à attendre que le client télécharge, analyse et exécute le bundle JavaScript du composant Client.

Côté serveur :

1. React affiche les composants Serveur dans un format de données spécial appelé React Server Component Payload (RSC Payload), qui inclut des références aux composants Client.
2. Next.js utilise le RSC Payload et les instructions JavaScript des composants Client pour afficher le HTML de la route côté serveur.

Puis, côté client :

1. Le HTML est utilisé pour afficher immédiatement un aperçu rapide et non interactif de la route.
2. Le React Server Components Payload est utilisé pour réconcilier les arborescences des composants Client et Serveur et mettre à jour le DOM.
3. Les instructions JavaScript sont utilisées pour hydrater les composants Client et rendre leur interface utilisateur interactive.

Qu'est-ce que l'hydratation ?

L'hydratation est le processus d'attachement des écouteurs d'événements au DOM, pour rendre le HTML statique interactif. En arrière-plan, l'hydratation est effectuée avec l'API React hydrateRoot.

Navigations ultérieures

Lors des navigations ultérieures, les composants Client sont entièrement affichés côté client, sans le HTML généré côté serveur.

Cela signifie que le bundle JavaScript du composant Client est téléchargé et analysé. Une fois le bundle prêt, React utilisera le RSC Payload pour réconcilier les arborescences des composants Client et Serveur et mettre à jour le DOM.

Retour à l'environnement serveur

Parfois, après avoir déclaré la frontière "use client", vous pouvez souhaiter revenir à l'environnement serveur. Par exemple, vous pouvez vouloir réduire la taille du bundle client, récupérer des données côté serveur ou utiliser une API uniquement disponible côté serveur.

Vous pouvez garder du code côté serveur même s'il est théoriquement imbriqué dans des composants Client en entrelaçant des composants Client et Serveur et des actions Serveur. Consultez la page Modèles de composition pour plus d'informations.