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 async Server-Komponente gibt es kein erstes leeres Rendern. Es gibt nichts, worein es flackern könnte, da die Daten bereits da waren, als das HTML erstellt wurde. Kein useEffect, kein Loading-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 ist bereitgestellt und gesperrt. Es exportiert getDishes(), welches ein Promise für ein Array von { id, name }-Objekten zurückgibt.

Mache Page in app/page.jsx zu einer async-Funktion.
Wende await getDishes() in eine dishes-Variable an.
Rendere innerhalb von <ul id="dish-list"> ein <li> pro dish, mit key={dish.id}, id={dish.id} und dem name des dishs als Text.

Kein useEffect, kein Loading-Flag, nur 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>
    );
}