Retour à la leçonMission
Mission : une fiche produit deux fois plus lente que nécessaire
Diagnostiquer des appels réseau séquentiels dans un composant async, puis les paralléliser sans casser Suspense ni la gestion d'erreur.
Contexte
ProduitDetail.vue, un composant async setup, exécute actuellement const reponseProduit = await fetch(...); const produit = await reponseProduit.json(); const reponseAvis = await fetch(...); const avis = await reponseAvis.json(). Chaque requête prend environ 400ms, donc la page met près de 800ms à s'afficher alors que les deux appels sont totalement indépendants l'un de l'autre. Le composant est déjà encadré par un <Suspense> avec un fallback correct.