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 sont à noter. Premièrement, un server component peut rendre un client component : ce sens est tout à fait normal. Deuxièmement, la page n'a pas changé de structure ; seul un petit morceau s'est déplacé.

Il y a une deuxième erreur qui vous pousse vers la même habitude. Mettez un onClick directement sur un button dans un server component et le runtime vous arrête : Event handlers cannot be passed to Client Component props. Un handler est une function : il ne peut pas survivre au voyage jusqu'au navigateur à moins qu'il ne réside dans un fichier client.

Défi

Facile

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

Corrigez le problème sans marquer la page comme un composant client :

Dans components/LikeButton.jsx, écrivez 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, supprimez le bouton cassé et affichez <LikeButton /> à la place. Importez-le depuis '../components/LikeButton'.
Laissez le titre et le tagline exactement tels qu'ils sont : 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>
    );
}