Client-Teile klein halten

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 20 von 47.

Wenn eine Seite eine interaktive Schaltfläche benötigt, gibt es eine verlockende Abkürzung: Setze einfach 'use client' an den Anfang der Seite und mach weiter. Es funktioniert. Außerdem ist das die häufigste Art, alles wegzuwerfen, was Next.js dir gerade gegeben hat.

Denke an Regel 2: Die Direktive kennzeichnet die gesamte Datei. Die Seite und die Überschrift, die Beschreibung, die Liste der Gerichte und jede von ihnen gerenderte Komponente werden zu Client-Code, der heruntergeladen und im Browser erneut ausgeführt wird. Ein einziger Button zog die gesamte Seite über die Grenze.

Die Gewohnheit, die dies behebt, ist klein und mechanisch:

Schiebe 'use client' nach unten zu den Blättern (Leaves).

Ziehe den interaktiven Teil in eine eigene kleine Datei, markiere diese Datei und lass die Seite auf dem Server:

// app/page.jsx - immer noch eine Server-Komponente
import LikeButton from '../components/LikeButton';

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

Zwei Dinge sind zu beachten. Erstens: Eine Server-component kann eine Client-component rendern: Diese Richtung ist völlig normal. Zweitens: Die page hat ihre Form nicht verändert; nur ein kleines Stück wurde verschoben.

Es gibt einen zweiten Fehler, der dich zu derselben Gewohnheit drängt. Setze onClick direkt auf eine Schaltfläche in einer Server-Komponente, und die Laufzeitumgebung hält dich auf: Event-Handler können nicht als Props an Client-Komponenten übergeben werden. Ein Handler ist eine Funktion: Er kann die Reise zum Browser nicht überstehen, es sei denn, er befindet sich in einer Client-Datei.

Aufgabe

Einfach

Diese Seite platziert ein onClick auf einer Schaltfläche innerhalb einer Serverkomponente, sodass die App überhaupt nicht gerendert wird.

Behebe das ohne, die Seite als Clientkomponente zu markieren:

Schreibe in components/LikeButton.jsx eine Clientkomponente ('use client' in Zeile 1), die einen Like-Zähler im State hält und eine Schaltfläche mit id="like" rendert. Ihr Text muss Likes: gefolgt vom Zähler sein.
Lösche in app/page.jsx die fehlerhafte Schaltfläche und rendere stattdessen <LikeButton />. Importiere sie aus '../components/LikeButton'.
Belasse die Überschrift und den Slogan genau so, wie sie sind: Die Seite muss eine Serverkomponente bleiben.

Probier es selbst

import './globals.css';

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

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