Comprendre la directive « utiliser le client » dans Next.js : explication des composants côté client

Hé les gars, dans cet article, nous allons explorer pourquoi nous utilisons la directive « utiliser le client » dans la version du routeur d'application de Next.js. Nous examinerons également ce qu'est le pré-rendu, la différence entre les composants serveur et les composants client, et comment ces concepts sont tous liés à « l'utilisation du client ». En comprenant ces concepts, vous pourrez améliorer vos compétences Next.js. Alors, commençons par le pré-rendu dans Next.js !

Qu’est-ce que le pré-rendu dans Next.js ?

Le pré-rendu dans Next.js, ou génération, est une méthode de création HTML pour chaque page à l'avance, ce qui la rend bénéfique à la fois pour le référencement et les performances. Next.js utilise le pré-rendu par défaut, permettant à la fois la génération statique et le rendu côté serveur, et cette méthode se produit sur le serveur, plutôt que sur le client ou dans le navigateur.

Qu'est-ce que « utiliser le client » ?

Dans Next.js, vous pouvez choisir de pré-afficher vos pages sur le serveur ou de les afficher sur le client dans le navigateur. Si vous souhaitez que vos composants soient générés ou pré-rendus par le serveur, vous n'avez rien à faire : par défaut, tous les composants s'exécutent sur le serveur dans Next.js. Mais si vous souhaitez que vos composants s'exécutent sur le client, vous devez ajouter « utiliser le client » en haut de votre composant. "use client" est une convention utilisée pour définir les composants client.

Remarque : si vous devez utiliser des hooks ou gérer des événements dans votre code, votre composant doit être un composant client, vous devrez donc ajouter "use client". Si vous avez déjà ajouté « use client » dans le composant parent, vous n'avez pas besoin de l'ajouter à nouveau dans chaque composant enfant. Tous les composants enfants seront automatiquement traités comme des composants clients.

Enfin, vous pouvez lire les articles complets sur la RSE, la SSR, la SSG et l'ISR.

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!