Zwei Fetches 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 Timing. Der Aufruf von getDishes() ohne await startet die Arbeit und gibt sofort ein Promise zurück, sodass zu dem Zeitpunkt, an dem Promise.all zu warten beginnt, bereits beide Ladevorgänge laufen. Es wird zu einem Array von Ergebnissen aufgelöst, in der Reihenfolge, in der Sie sie aufgeführt haben.

Die Faustregel:

Eine Ladung benötigt das Ergebnis der anderen → sequenzielle awaits, kein Weg daran vorbei
Sie sind independent → Promise.all

Two loads ist ein kleiner Gewinn. Fünf ist der Unterschied zwischen einer page, die sich sofort anfühlt, und one, die das nicht tut.

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