Dwa pobrania naraz

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 25 z 47.

Strona zwykle potrzebuje więcej niż jednej rzeczy. Oczywistym sposobem jej napisania jest też powolny sposób:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, rozpoczyna się dopiero teraz
// łącznie: 120ms

await oznacza zatrzymaj się tutaj. Drugie ładowanie nie rozpoczyna się, dopóki pierwsze się nie zakończy, mimo że jego wynik wcale nie był potrzebny.

Uruchom oba, a następnie zaczekaj na oba:

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

Cały sekret tkwi w odpowiednim momencie. Wywołanie getDishes() bez await rozpoczyna pracę i natychmiast zwraca obietnicę, więc gdy Promise.all zaczyna czekać, oba ładowania już trwają. Zwraca tablicę wyników w kolejności, w jakiej je wymieniono.

Ogólna zasada:

Jedno wczytanie wymaga wyniku drugiego → sekwencyjne wywołania await, nie da się tego obejść
Są niezależne → Promise.all

Dwa ładowania to mały sukces. Pięć to różnica między stroną, która wydaje się natychmiastowa, a taką, która nie sprawia takiego wrażenia.

Wyzwanie

Łatwy

app/page.jsx ładuje dania i napoje jedno po drugim. Nie są ze sobą powiązane, więc uruchom je równolegle.

Zastąp dwa kolejne await pojedynczym await Promise.all([...]), destrukturyzując wynik do zmiennych dishes i drinks.

lib/data.js jest zablokowany i sprawdza, czy oba ładowania kiedykolwiek zachodziły na siebie. Ostatecznie #report musi odczytywać Ran together zamiast Ran one at a time.

Spróbuj swoich sił

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}