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 pare aqui. O segundo carregamento nem começa até que o primeiro tenha terminado, embora nunca tenha precisado do resultado do primeiro.

Inicie ambos e depois aguarde por ambos:

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

O segredo está no momento certo. Chamar getDishes() sem await inicia o trabalho e devolve uma promise imediatamente, então, quando Promise.all começa a esperar, os dois carregamentos já estão em andamento. Ele é resolvido para um array de resultados, na ordem em que você os listou.

A regra geral:

Uma operação precisa do resultado da outra → awaits sequenciais, não há como evitar
Elas são independentes → Promise.all

Duas cargas são uma pequena vitória. Cinco são a diferença entre uma página que parece instantânea e uma 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>
    );
}