Mantén las partes de cliente pequeñas

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 20 de 47.

Cuando una página necesita un botón interactivo, hay un atajo tentador: poner 'use client' en la parte superior de la página y seguir adelante. Funciona. También es la forma más común de tirar a la basura todo lo que Next.js te acaba de dar.

Recuerda la regla 2: la directiva marca todo el archivo. Marcar la página y el encabezado, la descripción, la lista de platillos y cada componente que renderizan se convierten en código de cliente, descargado y vuelto a ejecutar en el navegador. Un botón arrastró toda la página al otro lado del límite.

El hábito que soluciona esto es pequeño y mecánico:

Empuja 'use client' hacia las hojas.

Extrae la parte interactiva en su propio archivo pequeño, marca ese archivo, y deja que la página permanezca en el servidor:

// app/page.jsx - todavía un componente de servidor
import LikeButton from '../components/LikeButton';

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

Dos cosas a tener en cuenta. Primero, un `server` `component` puede renderizar un `client` `component`: esa dirección es completamente normal. Segundo, la página no cambió de forma; solo una pequeña pieza se movió.

Hay un segundo error que te empuja hacia el mismo hábito. Coloca un onClick directamente en un botón dentro de un server component y el entorno de ejecución te detendrá: Event handlers cannot be passed to Client Component props. Un manejador es una función: no puede sobrevivir al viaje al navegador a menos que resida en un archivo client.

Desafío

Fácil

Esta página coloca un onClick en un botón dentro de un componente de servidor, por lo que la aplicación no se renderizará en absoluto.

Arréglalo sin marcar la página como un componente de cliente:

En components/LikeButton.jsx, escribe un componente de cliente ('use client' en la línea 1) que mantenga un recuento de me gusta en el estado y renderice un botón con id="like". Su texto debe ser Likes: seguido del recuento.
En app/page.jsx, elimina el botón roto y renderiza <LikeButton /> en su lugar. Importa este desde '../components/LikeButton'.
Deja el encabezado y el tagline exactamente como están: la página debe seguir siendo un componente de servidor.

Pruébalo tú mismo

import './globals.css';

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

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