Deux requêtes simultanées

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 25 sur 47.

Une page a généralement besoin de plus d'une chose. La façon évidente de l'écrire est aussi la plus lente :

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, ne commence que maintenant
// total : 120ms

await signifie s'arrêter ici. Le second chargement ne commence même pas tant que le premier n'est pas terminé, même s'il n'a jamais eu besoin du résultat du premier.

Lancez-les tous les deux, puis attendez-les tous les deux :

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

L'astuce réside dans le timing. Appeler getDishes() sans await démarre le travail et renvoie immédiatement une promesse, de sorte qu'au moment où Promise.all commence à attendre, les deux chargements sont déjà en cours d'exécution. Elle se résout en un tableau de résultats, dans l'ordre où vous les avez listés.

La règle générale :

Un chargement a besoin du résultat de l'autre → awaits séquentiels, pas d'autre moyen
Ils sont independent → Promise.all

Deux chargements, c'est une petite victoire. Cinq, c'est la différence entre une page qui semble instantanée et une autre qui ne l'est pas.

Défi

Facile

app/page.jsx me charge les plats et les boissons l'un après l'autre. Ils n'ont rien à voir l'un avec l'autre, donc exécutez-les ensemble.

Remplacez les deux await séquentiels par un seul await Promise.all([...]), déstructuré dans dishes et drinks.

lib/data.js est verrouillé, et il vérifie si les deux chargements se sont déjà chevauchés. #report doit finalement afficher Ran together au lieu de Ran one at a time.

Essayez vous-même

import './globals.css';

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

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