Zwei Abrufe gleichzeitig

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

Eine Seite benötigt normalerweise mehr als eine Sache. Der offensichtliche Weg, es zu schreiben, ist auch der langsame Weg:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, startet erst jetzt
// gesamt: 120ms

await bedeutet stoppe hier. Das zweite Laden beginnt erst, wenn das erste abgeschlossen ist, obwohl es das Ergebnis des ersten gar nicht benötigte.

Starte beide, warte dann auf beide:

const [dishes, drinks] = await Promise.all([
    getDishes(),
    getDrinks(),
]);
// gesamt: 60ms

Der Trick liegt im richtigen Zeitpunkt. Der Aufruf von getDishes() ohne await startet die Arbeit und gibt sofort ein Promise zurück. Wenn Promise.all mit dem Warten beginnt, laufen daher bereits beide Ladevorgänge. Das Ergebnis ist ein Array mit Ergebnissen in der Reihenfolge, in der du sie aufgelistet hast.

Die Faustregel:

Ein Ladevorgang benötigt das Ergebnis des anderen → sequenzielle awaits, kein Weg daran vorbei
Sie sind unabhängig → Promise.all

Zwei Ladevorgänge sind ein kleiner Erfolg. Fünf machen den Unterschied zwischen einer Seite, die sich sofort anfühlt, und einer, bei der das nicht der Fall ist.

Aufgabe

Einfach

app/page.jsx lädt Speisen und Getränke nacheinander. Sie haben nichts miteinander zu tun, also führen Sie sie zusammen aus.

Ersetzen Sie die beiden sequenziellen awaits durch ein einzelnes await Promise.all([...]), destrukturiert in dishes und drinks.

lib/data.js ist schreibgeschützt und überwacht, ob die beiden Ladevorgänge jemals überlappt haben. #report muss am Ende Ran together anstelle von Ran one at a time anzeigen.

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