Servidor Dentro do Cliente

Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 21 de 47.

Aqui está a regra que quase todo mundo erra, e é ela que decide o quão longe você pode levar o servidor.

Um componente de cliente não pode importar um componente de servidor: importá-lo o arrasta através da fronteira, e ele também se torna código de cliente. Por isso, as pessoas concluem que tudo dentro de um wrapper interativo precisa ser código de cliente. Essa conclusão está errada.

Um componente de cliente pode renderizar conteúdo do servidor passado a ele como children.

A diferença é quem faz a renderização. Quando uma página do servidor escreve isto:

<Panel>
    <Details />
</Panel>

…o servidor renderiza <Details /> e entrega o resultado finalizado a Panel como uma prop. Panel nunca o importa, nunca o executa: ele apenas decide onde colocá-lo. Para o componente do cliente, children é uma parte da interface já finalizada.

Isso é o que permite que uma pequena estrutura interativa (uma barra de abas, um modal, um painel retrátil) envolva grandes quantidades de conteúdo exclusivo do servidor sem arrastar nada disso para o navegador. A parte interativa permanece pequena; o conteúdo permanece no servidor.

A forma de lembrar: wrappers do cliente, preenchimentos do servidor.

Desafio

Médio

components/Panel.jsx é um componente do cliente (bloqueado, leia-o): ele renderiza um botão de alternância e mostra seus children somente quando está aberto.

No momento, a página renderiza os detalhes ao lado do painel em vez de dentro dele, então a alternância não controla nada.

Em app/page.jsx, mova o <p id="details"> para que ele fique entre as tags <Panel> como seus filhos.
Mantenha o texto exatamente como está e deixe app/page.jsx como um componente do servidor: nenhuma diretiva.

O parágrafo ainda é renderizado no servidor. O painel do cliente apenas decide se deve exibi-lo.

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