Resumen: Servidor y Cliente
Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 22 de 47.
Desafío
IntermedioRecapítulo del capítulo: traza tú mismo la frontera entre servidor/cliente.
La página enumera platillos en el servidor, pero también coloca un onClick directamente en un botón, 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/OpenHours.jsx, construye un componente de cliente ('use client'en la línea 1) que mantenga un booleanoopenen el estado y renderice un botón conid="toggle". Su texto debe serShow hourscuando esté cerrado yHide hourscuando esté abierto. - Cuando esté abierto, también renderiza un
<p>conid="hours"y el textoOpen 9am-5pm. Cuando esté cerrado, ese párrafo no debe existir. - En
app/page.jsx, reemplaza el botón roto y el párrafo siempre visible con<OpenHours />, importado desde'../components/OpenHours'. El encabezado y la lista de platillos permanecen exactamente como están: la página sigue 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>
);
}Todas las lecciones de Esenciales de Next.js
4Servidor y Cliente
Dos tipos de componentesLectura del errorLa línea 'use client'Mantén las partes de cliente pequeñasServidor dentro de clienteResumen: Servidor y Cliente