Server dentro Client

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 21 di 47.

Ecco la regola che quasi tutti sbagliano, ed è quella che determina fino a che punto puoi spingere il server.

Un componente client non può importare un componente server: importarlo lo trascina oltre il confine e diventa anche codice client. Quindi si conclude che tutto ciò che si trova all'interno di un wrapper interattivo debba essere codice client. Questa conclusione è sbagliata.

Un componente client può visualizzare contenuto server passato come children.

La differenza sta in chi esegue il rendering. Quando una pagina del server scrive questo:

<Panel>
    <Details />
</Panel>

…il server esegue il rendering di <Details /> e passa il risultato finito a Panel come prop. Panel non lo importa mai e non lo esegue mai: decide soltanto dove inserirlo. Per il componente client, children è un elemento dell’interfaccia già pronto.

Questo consente a una piccola interfaccia interattiva (una barra di schede, una finestra modale, un pannello comprimibile) di racchiudere grandi quantità di contenuti disponibili solo sul server senza trasferirne alcuna parte nel browser. La parte interattiva rimane piccola; i contenuti restano sul server.

La forma da ricordare: involucri client, ripieni server.

Sfida

Medio

components/Panel.jsx è un componente client (bloccato, leggilo): visualizza un pulsante di attivazione e mostra i suoi children solo quando è aperto.

Al momento la pagina visualizza i dettagli accanto al pannello invece che al suo interno, quindi il pulsante non controlla nulla.

In app/page.jsx, sposta <p id="details"> in modo che si trovi tra i tag <Panel>, come contenuto figlio.
Mantieni il testo esattamente com'è e lascia app/page.jsx come componente server: nessuna direttiva.

Il paragrafo viene comunque visualizzato sul server. Il pannello client decide solo se mostrarlo.

Provalo tu

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}