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 servidor renderiza <Details /> y entrega el resultado terminado a Panel como una prop. Panel nunca lo importa ni lo ejecuta: simplemente decide dónde colocarlo. Para el componente de cliente, children es una parte de la interfaz de usuario ya terminada.

Esto es lo que permite que una pequeña interfaz interactiva (una tira de pestañas, un cuadro modal, un panel plegable) envuelva grandes cantidades de contenido exclusivo del servidor sin arrastrar nada de ello al navegador. La parte interactiva sigue siendo 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 al lado del panel en lugar de dentro de él, por lo que el botón de alternancia no controla nada.

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

El párrafo todavía se renderiza 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>
    );
}