use client

La directive 'use client' déclare un point d'entrée pour les composants à rendre côté client et doit être utilisée lors de la création d'interfaces utilisateur (UI) interactives nécessitant des fonctionnalités JavaScript côté client, telles que la gestion d'état, la gestion d'événements et l'accès aux API du navigateur. Il s'agit d'une fonctionnalité de React.

Bon à savoir :

Vous n'avez pas besoin d'ajouter la directive 'use client' à chaque fichier contenant des composants clients. Vous devez seulement l'ajouter aux fichiers dont les composants doivent être rendus directement dans des composants serveur. La directive 'use client' définit la frontière client-serveur, et les composants exportés depuis un tel fichier servent de points d'entrée vers le client.

Utilisation

Pour déclarer un point d'entrée pour les composants clients, ajoutez la directive 'use client' en haut du fichier, avant toute importation :

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementer</button>
    </div>
  )
}

Lorsque vous utilisez la directive 'use client', les props des composants clients doivent être sérialisables. Cela signifie que les props doivent être dans un format que React peut sérialiser lors de l'envoi de données du serveur vers le client.

'use client'

export default function Counter({
  onClick /* ❌ Une fonction n'est pas sérialisable */,
}) {
  return (
    <div>
      <button onClick={onClick}>Incrementer</button>
    </div>
  )
}

Imbrication de composants clients dans des composants serveur

Combiner des composants serveur et clients vous permet de créer des applications à la fois performantes et interactives :

1. Composants serveur : À utiliser pour le contenu statique, la récupération de données et les éléments optimisés pour le SEO.
2. Composants clients : À utiliser pour les éléments interactifs nécessitant un état, des effets ou des API du navigateur.
3. Composition de composants : Imbriquez des composants clients dans des composants serveur selon les besoins pour une séparation claire de la logique serveur et client.

Dans l'exemple suivant :

• Header est un composant serveur gérant du contenu statique.
• Counter est un composant client permettant l'interactivité dans la page.

import Header from './header'
import Counter from './counter' // Ceci est un composant client

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

Référence

Consultez la documentation React pour plus d'informations sur 'use client'.