Serveur dans le client

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 21 sur 47.

Voici la règle que presque tout le monde comprend de travers, et c'est celle qui détermine jusqu'où vous pouvez pousser le server.

Un composant client ne peut pas import un composant server : l'importer le fait basculer de l'autre côté de la frontière et cela devient aussi du code client. Les gens en concluent donc que tout ce qui se trouve à l'intérieur d'un wrapper interactif doit être du code client. Cette conclusion est fausse.

Un composant client peut rendre du contenu serveur qui lui est transmis sous forme de children.

La différence réside dans qui effectue le rendu. Lorsqu'une page serveur écrit ceci :

<Panel>
    <Details />
</Panel>

…le server génère <Details /> et transmet le résultat final à Panel en tant que prop. Panel ne l'importe jamais, ne l'exécute jamais : il décide simplement où le placer. En ce qui concerne le composant client, children est un élément d'interface utilisateur déjà terminé.

C'est ce qui permet à un petit conteneur interactif (un onglet, une boîte modale, un panneau réductible) d'envelopper de grandes quantités de contenu exclusivement serveur sans en entraîner une seule partie dans le navigateur. La partie interactive reste minime ; le contenu reste sur le serveur.

La forme à retenir : enveloppes client, garnitures serveur.

Défi

Moyen

components/Panel.jsx est un composant client (verrouillé, lisez-le) : il affiche un bouton de bascule et affiche ses children uniquement lorsqu'il est ouvert.

Pour l'instant, la page affiche les détails à côté du panneau au lieu de les afficher à l'intérieur, donc le bouton ne contrôle rien.

Dans app/page.jsx, déplacez le <p id="details"> pour qu'il se situe entre les balises <Panel> en tant qu'enfants.
Conservez le texte exactement tel quel, et laissez app/page.jsx en composant serveur : aucune directive.

Le paragraphe est toujours rendu sur le serveur. Le panneau client décide seulement de l'afficher ou non.

Essayez vous-même

import './globals.css';

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

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