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>
    );
}