2つのフェッチを同時に実行

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 25/47。

ページには通常、複数のデータが必要です。それを記述する明白な方法は、遅い方法でもあります：

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms、今から開始
// 合計: 120ms

await はここで停止するという意味です。2つ目のロードは、最初のロードの波及結果を必要としていないにもかかわらず、最初のロードが終わるまで開始すらされません。

両方を開始してから、両方を待ちます:

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

コツはタイミングにあります。await を付けずに getDishes() を呼び出すと、処理が**開始**され、すぐに promise が返されるため、Promise.all が待機を開始する頃には両方の loads がすでに実行されています。指定した順序で結果の配列に解決されます。

経験則：

一方がもう一方の結果を必要とする場合 → 順次 await を使用（避ける方法はありません）
互いに独立している場合 → Promise.all を使用

Two loads は小さな勝利です。5つは、一瞬で表示されるように感じる page とそうでない one の違いです。

チャレンジ

簡単

app/page.jsx は dishes と drinks を順番に読み込みます。これらは互いに無関係であるため、並行して実行してください。

2つの連続する await を、dishes と drinks に分割代入する単一の await Promise.all([...]) に置き換えます。

lib/data.js はロックされており、2つの読み込みがオーバーラップしたかどうかを監視しています。#report は最終的に Ran one at a time ではなく Ran together と表示される必要があります。

自分で試してみよう

import './globals.css';

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

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