Mantieni piccole le parti Client

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 20 di 47.

Quando una pagina ha bisogno di un pulsante interattivo, c'è una scorciatoia allettante: aggiungi 'use client' all'inizio della pagina e vai avanti. Funziona. È anche il modo più comune per buttare via tutto ciò che Next.js ti ha appena dato.

Ricorda la regola 2: la direttiva contrassegna l'intero file. La pagina, l'intestazione, la descrizione, l'elenco dei piatti e ogni componente che renderizzano diventano tutti codice client, scaricato e rieseguito nel browser. Un solo pulsante ha trascinato l'intera pagina oltre il confine.

L'abitudine che risolve questo problema è piccola e meccanica:

Sposta 'use client' verso le foglie.

Sposta la parte interattiva in un piccolo file dedicato, contrassegna quel file e lascia la pagina sul server:

// app/page.jsx - ancora un componente server
import LikeButton from '../components/LikeButton';

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

Due cose da notare. Primo, un componente server può renderizzare un componente client: questa direzione è del tutto normale. Secondo, la pagina non ha cambiato forma; si è spostata solo una piccola parte.

C'è un secondo errore che ti spinge verso la stessa abitudine. Aggiungi direttamente un onClick a un pulsante in un componente server e il runtime ti ferma: Non è possibile passare gestori di eventi alle props dei componenti client. Un gestore è una funzione: non può arrivare al browser a meno che non si trovi in un file client.

Sfida

Facile

Questa pagina inserisce un onClick su un pulsante all'interno di un componente server, quindi l'app non verrà renderizzata affatto.

Risolvilo senza contrassegnare la pagina come componente client:

In components/LikeButton.jsx, scrivi un componente client ('use client' alla riga 1) che mantenga in stato un conteggio dei Mi piace e mostri un pulsante con id="like". Il suo testo deve essere Likes: seguito dal conteggio.
In app/page.jsx, elimina il pulsante che non funziona e mostra invece <LikeButton />. Importalo da '../components/LikeButton'.
Lascia l'intestazione e lo slogan esattamente come sono: la pagina deve rimanere un componente server.

Provalo tu

import './globals.css';

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

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