Comment utiliser Promise.all pour optimiser les performances dans un projet front-end ?

Dans cet article, nous allons decouvrir ce qu'est Promise.all, pourquoi l'utiliser, ses avantages et inconvenients, et comment l'utiliser pour optimiser les performances dans un projet front-end avec React, Next.js & Typescript. Sachez tout de meme que Promise.all est une methode JavaScript native, et peut etre utilisee dans n'importe quel projet (front-end comme back-end).

Qu'est-ce que Promise.all ?

Promise.all est une methode JavaScript qui permet de gerer plusieurs promesses de maniere concurrente. Elle prend en entree un tableau de promesses et renvoie une seule promesse qui se resout lorsque toutes les promesses du tableau sont resolues, ou rejette si l'une des promesses est rejetee.

Cette capacite a gerer plusieurs operations asynchrones simultanement est l'une des solutions qui peut etre utilisee pour optimiser les performances dans des projets front-end complexes, tels que les SaaS, les sites e-commerce, et les applications web.

Pourquoi utiliser Promise.all ?

• Reduction du temps d'attente global : Plutot que d'attendre que chaque requete se termine avant de commencer la suivante, Promise.all permet d'executer plusieurs requetes en parallele, reduisant ainsi le temps d'attente total.
• Gestion efficace des erreurs : Promise.all rejette la promesse principale des que l'une des promesses passees en parametre est rejetee, permettant de detecter et de gerer les erreurs plus rapidement.
• Code plus propre et maintenable : En centralisant la gestion des promesses, Promise.all permet d'eviter les chaines de promesses complexes et imbriquees, rendant le code plus lisible et maintenable.

Les inconvenients de Promise.all

Bien que Promise.all presente de nombreux avantages, cette methode comporte egalement des inconvenients a prendre en compte :

• Rejet global : Si une seule promesse echoue, Promise.all rejette l'ensemble des promesses, ce qui peut etre problematique si vous avez besoin des resultats des autres promesses.
• Charge reseau accrue : Executer plusieurs requetes simultanement peut surcharger le reseau, surtout si les requetes concernent de grandes quantites de donnees ou sont envoyees a des serveurs differents.
• Gestion des ressources : L'utilisation excessive de Promise.all peut entrainer une utilisation inefficace des ressources, surtout si les promesses impliquent des operations lourdes en calcul ou en memoire.

Exemples d'utilisation

Voici quelques exemples pratiques d'utilisation de Promise.all pour optimiser les performances dans vos projets front-end (Javascript, React, Next.js, etc.) :

Exemple simple

Supposons que vous devez recuperer les informations d'un utilisateur, ses amis et ses photos depuis differentes API dans un projet front-end (React, Next.js, etc.). Faire ces requetes sequentiellement prendrait un temps considerable et reduirait l'efficacite de votre application.

type User = {
  id: number;
  name: string;
}
 
type Friend = {
  id: number;
  name: string;
}
 
type Photo = {
  id: number;
  url: string;
}
 
 
const getUserData = (): Promise<User> => fetch('/api/user').then(response => response.json());
const getUserFriends = (userId: number): Promise<Friend[]> => fetch(`/api/user/${userId}/friends`).then(response => response.json());
const getUserPhotos = (userId: number): Promise<Photo[]> => fetch(`/api/user/${userId}/photos`).then(response => response.json());
 
const userId = 1;
 
Promise.all([
  getUserData(),
  getUserFriends(userId),
  getUserPhotos(userId)
]).then(([userData, friends, photos]) => {
  console.log('User Data:', userData);
  console.log('Friends:', friends);
  console.log('Photos:', photos);
}).catch(error => {
  console.error('An error occurred:', error);
});

Dans cet exemple, les appels API pour recuperer les donnees utilisateur, les amis et les photos sont effectues en parallele grace a Promise.all. Cela permet de reduire le temps total necessaire pour obtenir toutes les donnees, ameliorant ainsi la reactivite de l'application.

Utilisation de Promise.all avec Next.js

Prenons l'exemple d'une page de produit e-commerce qui doit charger les details du produit, les avis des clients et les produits recommandes. Faire ces appels API de maniere sequentielle entraine des temps de chargement longs dans votre application Next.js.

import { GetServerSidePropsContext } from 'next';
import { Suspense } from 'react';
 
type Product = {
  id: number;
  name: string;
  description: string;
  price: number;
}
 
type Review = {
  id: number;
  content: string;
  rating: number;
}
 
type Recommendation = {
  id: number;
  name: string;
  price: number;
}
 
const getProductDetails = async (productId: number): Promise<Product> => {
  const response = await fetch(`https://api.example.com/product/${productId}`);
  return response.json();
};
 
const getProductReviews = async (productId: number): Promise<Review[]> => {
  const response = await fetch(`https://api.example.com/product/${productId}/reviews`);
  return response.json();
};
 
const getProductRecommendations = async (productId: number): Promise<Recommendation[]> => {
  const response = await fetch(`https://api.example.com/product/${productId}/recommendations`);
  return response.json();
};
 
export async function generateMetadata({ params }: { params: { productId: string } }) {
  const productId = parseInt(params.productId, 10);
  const product = await getProductDetails(productId);
  return { title: product.name };
}
 
export default async function ProductPage({ params }: { params: { productId: string } }) {
  const productId = parseInt(params.productId, 10);
 
  const [product, reviews, recommendations] = await Promise.all([
    getProductDetails(productId),
    getProductReviews(productId),
    getProductRecommendations(productId),
  ]);
 
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
 
      <h2>Customer Reviews</h2>
      <ul>
        {reviews.map((review) => (
          <li key={review.id}>{review.content} - {review.rating} stars</li>
        ))}
      </ul>
 
      <h2>Recommended Products</h2>
      <ul>
        {recommendations.map((recommendation) => (
          <li key={recommendation.id}>{recommendation.name} - ${recommendation.price}</li>
        ))}
      </ul>
    </div>
  );
}

Dans cet exemple, nous utilisons les server components de Next.js pour rendre une page de produit e-commerce. Les appels API pour recuperer les details du produit, les avis des clients et les recommandations de produits sont effectues en parallele grace a Promise.all.

Cela garantit que les donnees sont chargees simultanement, reduisant ainsi le temps d'attente et ameliorant l'experience utilisateur.

Conclusion

Promise.all est un outil puissant et important a connaitre pour optimiser les performances des applications front-end React & Next.js en executant des operations asynchrones en parallele.

Cependant, il est essentiel de bien comprendre ses inconvenients et de l'utiliser de maniere judicieuse pour eviter les problemes de performances et de gestion des erreurs.

En appliquant les bonnes pratiques et en tenant compte des contraintes specifiques a chaque projet, vous pouvez profitez des benefices de Promise.all dans votre SaaS, votre application web ou votre site e-commerce.