Два запроса одновременно

Часть раздела Основы Next.js путешествия по React на Coddy — урок 25 из 47.

Обычно странице требуется больше одной вещи. Очевидный способ написать это — также и медленный:

const dishes = await getDishes();   // 60мс
const drinks = await getDrinks();   // 60мс, начиная только сейчас
// итого: 120мс

await означает остановиться here. Вторая загрузка даже не начнется, пока не завершится первая, хотя ей и не нужен был результат первой.

Запустите их обе, а затем дождитесь обеих:

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

Секрет заключается во времени исполнения. Вызов getDishes() без await запускает работу и сразу возвращает промис, поэтому к моменту, когда Promise.all начинает ожидание, обе загрузки уже выполняются. Он возвращает массив результатов в том порядке, в котором вы их указали.

Практическое правило:

Одной загрузке нужен результат другой → последовательные awaits, без вариантов
Они independent → Promise.all

Two loads — это небольшая победа. Пять — это разница между page, которая кажется мгновенной, и one, которая такой не кажется.

Задание

Легко

app/page.jsx загружает блюда и напитки один за другим. Они никак не связаны друг с другом, поэтому запустите их одновременно.

Замените два последовательных await на один await Promise.all([...]) с деструктуризацией в dishes и drinks.

Файл lib/data.js заблокирован, и он отслеживает, пересекались ли когда-либо две загрузки. Элемент #report в итоге должен содержать текст Ran together вместо Ran one at a time.

Попробуйте сами

import './globals.css';

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

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