Servidor dentro de cliente

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

Aquí está la regla que casi todo el mundo se equivoca al entender, y es la que decide hasta dónde puedes llevar al servidor.

Un componente de cliente no puede importar un componente de servidor: importarlo lo arrastra a través de la frontera y se convierte también en código de cliente. Por eso la gente concluye que cualquier cosa dentro de un contenedor interactivo debe ser código de cliente. Esa conclusión es incorrecta.

Un componente de cliente puede renderizar contenido de servidor pasado como children.

La diferencia radica en quién realiza el renderizado. Cuando una página de servidor escribe esto:

<Panel>
    <Details />
</Panel>

…el server renderiza <Details /> y entrega el resultado finalizado a Panel como una prop. Panel nunca lo importa, nunca lo ejecuta: solo decide dónde colocarlo. En lo que respecta al componente de client, children es una pieza de UI ya finalizada.

Esto es lo que permite que una pequeña estructura interactiva (una barra de pestañas, un modal, un panel desplegable) envuelva grandes cantidades de contenido exclusivo del servidor sin arrastrar nada de ello al navegador. La parte interactiva se mantiene diminuta; el contenido permanece en el servidor.

La forma de recordarlo: envoltorios de cliente, rellenos de servidor.

Desafío

Intermedio

components/Panel.jsx es un componente de cliente (bloqueado, léelo): renderiza un botón de alternancia y muestra sus children solo cuando está abierto.

Ahora mismo la página renderiza los detalles junto al panel en lugar de dentro de él, por lo que la alternancia no controla nada.

En app/page.jsx, mueve el <p id="details"> para que quede entre las etiquetas <Panel> como sus children.
Mantén el texto exactamente como está y deja app/page.jsx como un componente de servidor: sin directiva.

El párrafo se sigue renderizando en el servidor. El panel de cliente solo decide si mostrarlo.

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