Server innerhalb von Client

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 21 von 47.

Hier ist die Regel, die fast jeder falsch versteht, und es ist genau die, die darüber entscheidet, wie weit man den Server bringen kann.

Eine Client-Komponente kann eine Server-Komponente nicht importieren: Das Importieren zieht sie über die Grenze und sie wird ebenfalls zu Client-Code. Daher schlussfolgern viele, dass alles innerhalb eines interaktiven Wrappers Client-Code sein muss. Diese Schlussfolgerung ist falsch.

Eine Client-Komponente kann Server-Inhalte rendern, die ihr als children übergeben wurden.

Der Unterschied besteht darin, wer das Rendering durchführt. Wenn eine server-Seite dies schreibt:

<Panel>
    <Details />
</Panel>

…der server rendert <Details /> und übergibt das fertige Ergebnis als Prop an Panel. Panel importiert es nie und führt es nie aus: Es entscheidet einfach nur, wo es platziert wird. Aus der Sicht der Client-Komponente ist children ein bereits fertiges Stück UI.

Dies ist es, was einer kleinen interaktiven Hülle (einer Registerkartenleiste, einem Modal, einem einklappbaren Panel) ermöglicht, große Mengen an reinen Server-Inhalten zu umschließen, ohne etwas davon in den Browser zu ziehen. Der interaktive Teil bleibt winzig; der Inhalt bleibt auf dem Server.

Die Form, die man sich merken sollte: Client-Hüllen, Server-Füllungen.

Aufgabe

Mittel

components/Panel.jsx ist eine Client-Komponente (gesperrt, lies sie dir durch): Sie rendert einen Umschalt-button und zeigt ihre children nur an, wenn sie geöffnet ist.

Im Moment rendert die Seite die Details neben dem Panel anstatt darin, sodass der Umschalter nichts steuert.

Verschiebe in app/page.jsx das <p id="details">, sodass es zwischen den <Panel>-Tags als deren Children liegt.
Behalte den Text genau so bei, wie er ist, und belasse app/page.jsx als Server-Komponente: keine Direktive.

Der Absatz wird weiterhin auf dem Server gerendert. Das Client-Panel entscheidet nur, ob er angezeigt wird.

Probier es selbst

import './globals.css';

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

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