Ladezustände

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

Eine asynchrone Seite ist nur so schnell wie ihr langsamster Ladevorgang. Während Next.js wartet, schaut der Nutzer auf … was genau?

Platziere ein loading.jsx neben der Seite und die Antwort ist: was auch immer du willst.

app/
    slow/
        page.jsx       the async page
        loading.jsx    shown while it resolves

Es ist eine gewöhnliche Komponente mit einem Standard-Export und sie erwartet keine Props:

export default function Loading() {
    return <p>Loading the special…</p>;
}

Du renderst sie nie selbst und importierst sie nie. Wenn du die Datei neben der Seite ablegst, wird diese Seite in eine Suspense-Grenze eingeschlossen: Next.js zeigt beim Navigieren sofort loading.jsx an, ersetzt es durch die echte Seite, sobald die Await-Vorgänge abgeschlossen sind, und das umgebende Layout flackert nie.

Zwei Dinge ergeben sich aus dem Ort, an dem sich die Datei befindet:

Es deckt die Seite daneben und alles darunter Verschachtelte ab, bis ein tiefer gelegenes loading.jsx übernimmt
Nur die Seite wechselt: Header und Navigation aus dem Layout bleiben erhalten und anklickbar

Beachte, was du nicht geschrieben hast: kein Lade-Flag, kein Status und kein if (loading). Der Dateiname ist der Mechanismus.

Aufgabe

Einfach

app/slow/page.jsx wartet auf einen langsamen Ladevorgang, und app/slow/loading.jsx existiert bereits, ist aber leer.

Füge innerhalb seines <main> ein <p> mit id="loading" hinzu.
Der Text muss exakt Loading the special... lauten.

Die Seite und lib/data.js sind gesperrt. Die Tests navigieren zu /slow und betrachten den Bildschirm, bevor die Daten eintreffen.

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>
    );
}