Duas Buscas ao Mesmo Tempo

Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 25 de 47.

Uma página geralmente precisa de mais de uma coisa. A maneira óbvia de escrever isso é também a maneira lenta:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, começando apenas agora
// total: 120ms

await significa stop here. O segundo carregamento nem começa até que o primeiro one tenha terminado, mesmo que nunca tenha precisado do resultado do primeiro one.

Inicie ambos e depois aguarde por ambos:

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

O truque está no tempo de execução. Chamar getDishes() sem await inicia o trabalho e retorna uma promise imediatamente, para que, no momento em que o Promise.all começar a esperar, ambos os carregamentos já estejam em execução. Ele resolve para uma array de resultados, na ordem em que você os listou.

A regra geral:

Um carregamento precisa do resultado do outro → awaits sequenciais, não há outro jeito
Eles são independent → Promise.all

Two loads é uma pequena vitória. Cinco é a diferença entre uma page que parece instantânea e one que não parece.

Desafio

Fácil

O app/page.jsx carrega pratos e bebidas um após o outro. Eles não têm nada a ver um com o outro, então execute-os juntos.

Substitua os dois awaits sequenciais por um único await Promise.all([...]), desestruturado em dishes e drinks.

O lib/data.js está bloqueado e ele monitora se os dois carregamentos já se sobrepuseram em algum momento. O #report deve terminar exibindo Ran together em vez de Ran one at a time.

Experimente você mesmo

import './globals.css';

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

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