Client-Teile klein halten

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

Wenn eine Seite einen interaktiven Button benötigt, gibt es eine verlockende Abkürzung: man klatscht 'use client' ganz oben auf die Seite und macht weiter. Es funktioniert. Es ist aber auch der häufigste Weg, alles wegzuwerfen, was Next.js einem gerade gegeben hat.

Denken Sie an Regel 2: Die Direktive markiert die gesamte Datei. Markiert man die Seite, werden die Überschrift, die Beschreibung, die Liste der Gerichte und jede Komponente, die sie rendern, zu Client-Code, der heruntergeladen und im Browser erneut ausgeführt wird. Ein einziger Button hat die gesamte Seite über die Grenze gezogen.

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 Sie zu derselben Gewohnheit verleitet. Platzieren Sie ein onClick direkt auf einem Button in einer Server-Komponente, stoppt Sie die Runtime: Event handlers cannot be passed to Client Component props. 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 einen Button innerhalb einer Server-Komponente, sodass die App überhaupt nicht rendert.

Ripariere es, ohne die Seite als Client-Komponente zu markieren:

Schreibe in components/LikeButton.jsx eine Client-Komponente ('use client' in Zeile 1), die eine Like-Anzahl im State hält und einen Button mit id="like" rendert. Sein Text muss Likes: gefolgt von der Anzahl sein.
Lösche in app/page.jsx den fehlerhaften Button und rendere stattdessen <LikeButton />. Importiere ihn aus '../components/LikeButton'.
Lasse die Überschrift und den Tagline genau so, wie sie sind: Die Seite muss eine Server-Komponente 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>
    );
}