Composants Client

Les Composants Client vous permettent d'écrire une interface utilisateur interactive qui est prérendue côté serveur et peut utiliser JavaScript côté client pour s'exécuter dans le navigateur.

Cette page explique comment fonctionnent les Composants Client, comment ils sont rendus 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.
• API navigateur : Les Composants Client ont accès aux API du navigateur, comme la géolocalisation ou le localStorage.

Utilisation des Composants Client dans Next.js

Pour utiliser les 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 Composant Serveur et Client. Cela signifie qu'en définissant "use client" dans un fichier, tous les autres modules importés dans celui-ci, 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 que l'utilisation de onClick et useState dans un composant imbriqué (toggle.js) provoquera une erreur si la directive "use client" n'est pas définie. En effet, par défaut, tous les composants dans le routeur App sont des Composants Serveur où ces API ne sont pas disponibles. En définissant la directive "use client" dans toggle.js, vous pouvez indiquer à React d'entrer dans la frontière client où ces API sont accessibles.

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 client.

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

Comment les Composants Client sont-ils rendus ?

Dans Next.js, les Composants Client sont rendus 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 complet de la page

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 rend 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 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 rendus côté client, sans le HTML rendu 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 qui n'est disponible que 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.