Asynchrone Komponenten

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

Hier ist das Ergebnis für alles, was das letzte Kapitel vorbereitet hat. Eine Serverkomponente kann async sein:

import { getDishes } from '../lib/data';

export default async function Page() {
    const dishes = await getDishes();

    return <h1>{dishes.length} dishes</h1>;
}

Lies das noch einmal, denn das ist wirklich neu. Die Komponente wartet. Next.js führt sie auf dem Server aus, lässt das await zu Ende führen und wandelt das Ergebnis erst dann in HTML um.

Vergleichen Sie es mit der reinen Browser-Version, die Sie andernfalls schreiben würden:

Die Seite wird zuerst leer gerendert
Eine Anfrage wird gesendet, nachdem die Seite geladen wurde
Einige Zustände ändern sich und der Inhalt erscheint – ein Flackern, das der Benutzer jedes Mal sieht

Bei einer asynchronen Serverkomponente gibt es kein erstes leeres Rendern. Es gibt nichts, in das etwas flackern könnte, weil die Daten bereits vorhanden waren, als das HTML erstellt wurde. Kein useEffect, kein Lade-Flag, keine zweite Anfrage.

Zwei Regeln machen dies zulässig:

Nur server-Komponenten dürfen async sein: Eine Komponente, die mit 'use client' markiert ist, darf es nicht
Die Daten müssen von einem Ort kommen, den der Server erreichen kann: eine Datenbank, eine Datei oder ein Modul wie lib/data.js

Aufgabe

Einfach

lib/data.js wird bereitgestellt und ist gesperrt. Es exportiert getDishes(), das ein Promise für ein Array von Objekten der Form { id, name } zurückgibt.

Mach Page in app/page.jsx zu einer async-Funktion.
Warte mit await getDishes() auf die Ergebnisse und speichere sie in einer dishes-Variablen.
Rendere innerhalb von <ul id="dish-list"> ein <li> pro Gericht, mit key={dish.id}, id={dish.id} und dem name des Gerichts als Text.

Kein useEffect, kein Lade-Flag, einfach await.

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