Garder les parties client de petite taille

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 20 sur 47.

Lorsqu'une page a besoin d'un bouton interactif, il existe un raccourci tentant : ajouter 'use client' tout en haut de la page et passer à autre chose. Cela fonctionne. C'est aussi le moyen le plus courant de gâcher tout ce que Next.js vient de vous offrir.

Rappelez-vous la règle 2 : la directive marque l'ensemble du fichier. Marquez la page et le titre, la description, la liste des plats et chaque composant qu'ils rendent deviennent tous du code client, téléchargé et exécuté à nouveau dans le navigateur. Un seul bouton a fait basculer toute la page de l'autre côté de la frontière.

L'habitude qui corrige cela est simple et mécanique :

Poussez 'use client' vers les feuilles.

Extrayez la partie interactive dans son propre petit fichier, marquez ce fichier, et laissez la page rester sur le serveur :

// app/page.jsx - toujours un composant serveur
import LikeButton from '../components/LikeButton';

export default function Home() {
    return (
        <main>
            <h1>Coddy Eats</h1>
            <LikeButton />
        </main>
    );
}

Deux choses à remarquer. Premièrement, un composant serveur peut générer un composant client : cette direction est tout à fait normale. Deuxièmement, la page n’a pas changé de structure ; seul un petit élément a été déplacé.

Il existe une deuxième erreur qui vous pousse vers la même habitude. Placez directement un onClick sur un bouton dans un composant serveur et l’environnement d’exécution vous arrête : Event handlers cannot be passed to Client Component props. Un gestionnaire est une fonction : il ne peut pas survivre au trajet jusqu’au navigateur à moins de se trouver dans un fichier client.

Défi

Facile

Cette page place un onClick sur un bouton à l’intérieur d’un composant serveur, si bien que l’application ne s’affichera pas du tout.

Corrige-le sans marquer la page comme un composant client :

Dans components/LikeButton.jsx, écris un composant client ('use client' à la ligne 1) qui conserve un nombre de mentions « J’aime » dans son état et affiche un bouton avec id="like". Son texte doit être Likes: suivi du nombre.
Dans app/page.jsx, supprime le bouton défectueux et affiche <LikeButton /> à la place. Importe-le depuis '../components/LikeButton'.
Laisse le titre et le slogan exactement tels quels : la page doit rester un composant serveur.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}