Server innerhalb des Clients

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.

Das ermöglicht es einer kleinen interaktiven Oberfläche (einer Tab-Leiste, einem Modal, einem einklappbaren Panel), große Mengen ausschließlich auf dem Server verarbeiteter Inhalte zu kapseln, ohne davon etwas in den Browser zu laden. Der interaktive Teil bleibt winzig; die Inhalte bleiben 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): Sie rendert eine Umschalt-Schaltfläche und zeigt ihre children nur an, wenn sie geöffnet ist.

Derzeit rendert die Seite die Details neben dem Panel statt darin, sodass die Umschalt-Schaltfläche nichts steuert.

Verschiebe in app/page.jsx <p id="details">, sodass es zwischen den <Panel>-Tags als deren Inhalt steht.
Behalte den Text genau so bei und lasse app/page.jsx eine 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>
    );
}