Recapitulação: Servidor & Cliente
Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 22 de 47.
Desafio
MédioRecapitulação do capítulo: defina você mesmo o limite entre servidor e cliente.
A página lista os pratos no servidor, mas também coloca um onClick diretamente em um botão, então o aplicativo não será renderizado. Corrija isso sem marcar a página como um componente cliente:
- Em
components/OpenHours.jsx, crie um componente cliente ('use client'na linha 1) que mantenha um booleanoopenno estado e renderize um botão comid="toggle". O texto deve serShow hoursquando estiver fechado eHide hoursquando estiver aberto. - Quando estiver aberto, ele também renderiza um
<p>comid="hours"e o textoOpen 9am-5pm. Quando estiver fechado, esse parágrafo não deve existir. - Em
app/page.jsx, substitua o botão quebrado e o parágrafo sempre visível por<OpenHours />, importado de'../components/OpenHours'. O título e a lista de pratos permanecem exatamente como estão: a página continua sendo um componente 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>
);
}Todas as lições de Essenciais do Next.js
1Por que usar o Next.js
O que o Next.js adicionaA pasta AppSua primeira páginaRecapitulação: Por que usar o Next.js4Servidor & Cliente
Dois Tipos de ComponenteLendo o ErroA Linha 'use client'Mantenha as Partes de Cliente PequenasServidor Dentro do ClienteRecapitulação: Servidor & Cliente