Dos peticiones a la vez

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 25 de 47.

Una página suele necesitar más de una cosa. La forma obvia de escribirlo es también la forma lenta:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, empezando solo ahora
// total: 120ms

await significa detente aquí. La segunda carga ni siquiera comienza hasta que la primera ha terminado, aunque nunca necesitó el resultado de la primera.

Inicia ambos, después espera a ambos:

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

El truco está en el tiempo de ejecución. Llamar a getDishes() sin await inicia el trabajo y devuelve una promesa inmediatamente, por lo que para cuando Promise.all empieza a esperar, ambas cargas ya están en ejecución. Se resuelve en un array de resultados, en el orden en que los listaste.

La regla general:

Una carga necesita el resultado de la otra → awaits secuenciales, no hay otra opción
Son independent → Promise.all

Dos cargas es una pequeña victoria. Cinco es la diferencia entre una página que se siente instantánea y una que no.

Desafío

Fácil

app/page.jsx carga platillos y bebidas uno después de otro. No tienen nada que ver entre sí, así que ejecútalos juntos.

Reemplaza los dos await secuenciales con un único await Promise.all([...]), desestructurado en dishes y drinks.

lib/data.js está bloqueado y observa si las dos cargas se superpusieron alguna vez. #report debe terminar mostrando Ran together en lugar de Ran one at a time.

Pruébalo tú mismo

import './globals.css';

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

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