Ograniczaj części klienckie

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 20 z 47.

Gdy strona potrzebuje jednego interaktywnego przycisku, kusi pewien skrót: dodaj 'use client' na początku strony i przejdź dalej. To działa. To także najczęstszy sposób na zmarnowanie wszystkiego, co właśnie dał ci Next.js.

Pamiętaj o zasadzie 2: dyrektywa oznacza cały plik. Oznacz stronę, a nagłówek, opis, lista dań i wszystkie renderowane przez nie komponenty staną się kodem klienckim, pobieranym i ponownie uruchamianym w przeglądarce. Jeden przycisk przeniósł całą stronę na drugą stronę granicy.

Nawyk, który to naprawia, jest prosty i mechaniczny:

Przenieś 'use client' w dół, do liści.

Przenieś interaktywny element do osobnego, małego pliku, oznacz ten plik i pozostaw stronę po stronie serwera:

// app/page.jsx - nadal komponent serwerowy
import LikeButton from '../components/LikeButton';

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

Dwie rzeczy, na które warto zwrócić uwagę. Po pierwsze, komponent serwerowy może renderować komponent kliencki: taki kierunek jest całkowicie normalny. Po drugie, strona nie zmieniła kształtu; przeniesiono tylko jeden mały element.

Istnieje drugi błąd, który skłania cię do tego samego nawyku. Umieść onClick bezpośrednio na przycisku w komponencie serwerowym, a środowisko uruchomieniowe cię zatrzyma: Nie można przekazywać obsługi zdarzeń do właściwości komponentu klienckiego. Obsługa zdarzenia jest funkcją: nie może dotrzeć do przeglądarki, jeśli nie znajduje się w pliku klienckim.

Wyzwanie

Łatwy

Ta strona umieszcza onClick na przycisku wewnątrz komponentu serwerowego, więc aplikacja w ogóle się nie wyrenderuje.

Napraw to bez oznaczania strony jako komponentu klienckiego:

W components/LikeButton.jsx napisz komponent kliencki ('use client' w linii 1), który przechowuje w stanie liczbę polubień i renderuje przycisk z id="like". Jego tekst musi mieć postać Likes: , po którym następuje liczba polubień.
W app/page.jsx usuń zepsuty przycisk i zamiast niego wyrenderuj <LikeButton />. Zaimportuj go z '../components/LikeButton'.
Pozostaw nagłówek i slogan dokładnie bez zmian: strona musi pozostać komponentem serwerowym.

Spróbuj swoich sił

import './globals.css';

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

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