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 client não pode fazer import de um componente server: importá-lo o arrasta através da fronteira e ele se torna código client também. Portanto, as pessoas concluem que qualquer coisa dentro de um wrapper interativo deve ser código client. Essa conclusão está errada.

Um componente client pode renderizar conteúdo server 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 server renderiza <Details /> e entrega o resultado final para o Panel como uma prop. O Panel nunca o importa, nunca o executa: ele apenas decide onde colocá-lo. No que diz respeito ao componente do client, children é um pedaço de UI já finalizado.

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 para lembrar: client wrappers, server fillings.

Desafio

Médio

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

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

Em app/page.jsx, mova o <p id="details"> para que fique entre as tags <Panel> como seus filhos (children).
Mantenha o texto exatamente como está e deixe app/page.jsx como um componente servidor: sem 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>
    );
}