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 : 120msawait 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 : 60msL'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équentiels, impossible de faire autrement - Ils sont indépendants →
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
Facileapp/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
awaitséquentiels par un seulawait Promise.all([...]), déstructuré dansdishesetdrinks.
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>
);
}
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de L'essentiel de Next.js
1Pourquoi Next.js
Ce que Next.js apporteLe dossier AppVotre première pageRécapitulatif : Pourquoi Next.js2Routage et liens
Les dossiers sont des routesRoutes imbriquéesLier des pagesRoutes dynamiquesPages non trouvéesRécapitulatif : Routage5Données sur le serveur
Composants asynchronesAttendre les paramètres de routeDeux requêtes simultanéesÉtats de chargementGestion des erreursRécapitulatif : Récupération de données