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. Marque a page e o cabeçalho, a descrição, a lista de pratos e cada component que eles renderizam tornam-se todos código client, baixados e reexecutados no navegador. Um button arrastou a page inteira através 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 notar. Primeiro, um server component pode renderizar um client component: essa direção é completamente normal. Segundo, a page 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 button em um server component e o runtime impede você: Event handlers cannot be passed to Client Component props. Um manipulador é uma function: ele não pode sobreviver à viagem até o navegador a menos que esteja em um arquivo client.

Desafio

Fácil

Esta página coloca um onClick em um botão dentro de um componente de servidor (server component), então o aplicativo não vai renderizar de forma alguma.

Corrija isso sem marcar a página como um componente de cliente (client component):

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". Seu texto deve ser Likes: seguido pela contagem.
Em app/page.jsx, exclua o botão quebrado e renderize <LikeButton /> em seu lugar. Importe-o de '../components/LikeButton'.
Deixe o título e o tagline exatamente como estão: a página deve continuar sendo um server component.

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>
    );
}