Serwer wewnątrz klienta

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 21 z 47.

Oto zasada, którą niemal wszyscy źle rozumieją i która decyduje o tym, jak daleko możesz obciążyć serwer.

Komponent klienta nie może importować komponentu serwera: importowanie przenosi go przez granicę i on również staje się kodem klienta. Dlatego ludzie wnioskują, że wszystko wewnątrz interaktywnego komponentu otaczającego musi być kodem klienta. Ten wniosek jest błędny.

Komponent kliencki może renderować przekazaną mu zawartość serwerową jako children.

Różnica polega na tym, kto wykonuje renderowanie. Gdy strona serwera zapisuje:

<Panel>
    <Details />
</Panel>

…serwer renderuje <Details /> i przekazuje gotowy wynik do Panel jako prop. Panel nigdy go nie importuje ani nie uruchamia — po prostu decyduje, gdzie go umieścić. Z punktu widzenia komponentu klienckiego children to już gotowy element interfejsu użytkownika.

To właśnie pozwala małej interaktywnej powłoce (paskowi kart, oknu modalnemu, zwijanemu panelowi) opakować dużą ilość treści dostępnej wyłącznie na serwerze bez ładowania jej do przeglądarki. Część interaktywna pozostaje niewielka, a treść pozostaje na serwerze.

Zapamiętaj tę zasadę: opakowania po stronie klienta, wypełnienie po stronie serwera.

Wyzwanie

Średni

components/Panel.jsx to komponent kliencki (zablokowany, przeczytaj go): wyświetla przycisk przełączający i pokazuje swoje children tylko wtedy, gdy jest otwarty.

Obecnie strona wyświetla szczegóły obok panelu zamiast wewnątrz niego, więc przełącznik niczym nie steruje.

W app/page.jsx przenieś <p id="details"> tak, aby znalazł się między znacznikami <Panel> jako jego element potomny.
Pozostaw tekst dokładnie bez zmian i pozostaw app/page.jsx komponentem serwerowym: bez dyrektywy.

Akapit nadal jest renderowany na serwerze. Komponent kliencki panelu decyduje tylko o tym, czy go wyświetlić.

Spróbuj swoich sił

import './globals.css';

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

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