Comprendre la directive \"use client\" dans Next.js 13

Dans Next.js 13, l'introduction du nouveau répertoire d'applications a entraîné un changement significatif dans la façon dont les composants sont rendus. Par défaut, les composants du répertoire app sont traités comme des composants serveur, qui sont rendus sur le serveur. Ce comportement par défaut est optimisé pour les performances et la récupération de données, mais comporte des limites en matière d'interactivité côté client. Pour résoudre ce problème, Next.js 13 a introduit la directive « use client », qui désigne explicitement les composants ou les fichiers comme JavaScript côté client.

Pourquoi nous utilisons « utiliser le client »

Interactivité côté client

Si un composant doit interagir avec le navigateur (par exemple, gérer des événements utilisateur tels que des clics ou accéder au stockage local), il doit être marqué « utiliser le client ». En effet, les composants du serveur ne peuvent pas accéder aux API du navigateur, aux écouteurs d'événements ou à d'autres fonctionnalités côté client.

Hooks et gestion de l'état

Hooks comme useState, useEffect, useRef, etc., ne peuvent être utilisés que dans les composants clients. Par conséquent, marquer un fichier ou un composant avec "use client" est nécessaire lors de l'utilisation de ces hooks.

Gestion des événements

Les gestionnaires d'événements React (comme onClick, onChange) nécessitent que le composant s'exécute dans le navigateur. Par conséquent, le composant doit être marqué comme composant client.

Où il est utilisé

Vous placez "use client" en haut du fichier pour tout composant qui doit être rendu côté client :

"use client";

import { useState } from "react";

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Points clés

Directive de niveau supérieur

Il doit être placé en haut du fichier, avant tout import ou autre code.

Portée

Lorsque vous ajoutez « utiliser le client » à un fichier, tous les composants contenus dans ce fichier deviennent des composants clients, ce qui signifie qu'ils sont regroupés et exécutés sur le navigateur.

Utilisation sélective

Il est recommandé de l'utiliser uniquement lorsque cela est nécessaire car les composants du serveur sont plus efficaces en termes de performances et de récupération de données.

Résumé

En résumé, la directive "use client" est nécessaire lorsque l'on souhaite construire des composants interactifs côté client dans un framework qui, par défaut, privilégie le rendu et les optimisations côté serveur. En marquant explicitement les composants comme côté client, vous pouvez exploiter toute la puissance des fonctionnalités côté client de React, telles que les hooks et la gestion des événements, tout en bénéficiant des avantages en termes de performances du rendu côté serveur là où cela a du sens.

Cet équilibre permet aux développeurs de créer des applications Web hautement interactives et performantes, en tirant parti du rendu côté serveur et côté client selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!