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