Ladezustände

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

Eine `async`-`page` ist nur so schnell wie ihr langsamster `load`. Während Next.js wartet, sieht der Benutzer… 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 ganz normale Komponente mit einem default-Export, und sie nimmt keine Props entgegen:

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

Du renderst es nie selbst und importierst es nie. Wenn du die Datei neben der Seite ablegst, wird diese Seite in eine Suspense-Boundary gehüllt: Next.js zeigt loading.jsx in dem Moment an, in dem du navigierst, tauscht die echte Seite ein, sobald die Awaits 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

Beachten Sie, was Sie nicht geschrieben haben: kein Loading-Flag, kein State, 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>
    );
}