Mantenha as Partes de Cliente Pequenas

Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 20 de 47.

Quando uma página precisa de um botão interativo, existe um atalho tentador: colocar 'use client' no topo da página e seguir em frente. Funciona. Também é a maneira mais comum de jogar fora tudo o que o Next.js acabou de lhe dar.

Lembre-se da regra 2: a diretiva marca o arquivo inteiro. A página e o título, a descrição, a lista de pratos e todos os componentes que eles renderizam passam a ser código do cliente, baixados e executados novamente no navegador. Um botão arrastou a página inteira para o outro lado da fronteira.

O hábito que corrige isso é pequeno e mecânico:

Empurre 'use client' para as folhas (leaves).

Puxe a parte interativa para seu próprio pequeno arquivo, marque esse arquivo, e deixe a página permanecer no servidor:

// app/page.jsx - ainda um componente de servidor
import LikeButton from '../components/LikeButton';

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

Duas coisas a observar. Primeiro, um componente de servidor pode renderizar um componente de cliente: essa direção é completamente normal. Segundo, a página não mudou de formato; apenas uma pequena parte se moveu.

Há um segundo erro que leva você ao mesmo hábito. Coloque um onClick diretamente em um botão de um componente de servidor e o ambiente de execução interromperá você: Event handlers cannot be passed to Client Component props. Um manipulador é uma função: ele não pode sobreviver à viagem até o navegador a menos que esteja em um arquivo do cliente.

Desafio

Fácil

Esta página coloca um onClick em um botão dentro de um componente de servidor, então o aplicativo não será renderizado de forma alguma.

Corrija isso sem marcar a página como um componente de cliente:

Em components/LikeButton.jsx, escreva um componente de cliente ('use client' na linha 1) que mantenha uma contagem de curtidas no estado e renderize um botão com id="like". O texto dele deve ser Likes: seguido pela contagem.
Em app/page.jsx, exclua o botão com problema e renderize <LikeButton /> no lugar. Importe-o de '../components/LikeButton'.
Deixe o título e o slogan exatamente como estão: a página deve continuar sendo um componente de servidor.

Experimente você mesmo

import './globals.css';

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

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