Optimiser les performances d'une application Next.js

L'une des forces principales du framework est l'optimisation des performances. Utiliser Next.js 15 pour créer une application comme un site e-commerce, site vitrine ou tout site nécessitant d'être réactif et performant peut alors s'avérer très utile.

Malgré l'utilisation de données dynamiques dans les pages de votre application (appel base de données, appels API...), vous pourriez par exemple mettre ces appels de données en cache ou encore générer des pages statiques pour ne distribuer qu'un simple fichier HTML aux utilisateurs.

Génération de pages statiques

Lorsque vous créez une nouvelle page dans votre application, par défaut, celle-ci sera rendue de manière statique.

Le fonctionnement est simple, lorsque vous lancerez un build (c'est à dire lorsque vous préparerez votre application à être en production), l'ensemble des données de votre page vont être récupérées, le contenu HTML de votre page va être généré et sera sauvegardé dans un dossier .next qui contient l'ensemble des fichiers nécessaires au déploiement en production (plus précisément, vous pourrez les retrouver dans .next/server/app).

A partir de cet instant, et jusqu'au prochain build de votre application, celle-ci ne délivrera plus que ce fichier HTML léger et performant aux utilisateurs souhaitant accéder à cette page.

Seulement voilà, vous souhaiterez parfois créer des pages qui contiennent des paramètres dans l'URL (tel que /products/:id), dans ce cas présent, sans précision direct, impossible de connaître tous les paramètres "id" disponibles pour générer les pages HTML. C'est à partir de là que pourrait vous intéresser la génération statique pour des segments dynamiques.

Génération statique pour les segments dynamiques

Pour ces segments dynamiques, tel que /products/[slug] par exemple, deux choix peuvent s'offrir à vous pour la génération statique.

Ajouter un paramètre de segment dans votre page pour forcer la génération statique, au fur et à mesure de l'accès à vos pages comme par exemple :

export const dynamic = "force-static";

Une fois ce paramètre ajouté dans votre fichier page.tsx, lors de la première requête à une page avec un paramètre X, les données de cette page seront évaluées pour générer un fichier HTML complet. C'est ce fichier HTML qui sera utilisé pour répondre aux futures requêtes des utilisateurs qui contiennent le même paramètre d'URL par la suite. Ce fonctionnement est une génération de page statique incrémental.

Il se pourrait que vous souhaitiez, en plus ou à l'inverse, générer la totalité ou une partie de vos pages avec ce paramètre dès le départ, au build. Dans ce cas, il faudra préciser au framework quels sont les paramètres pour lesquels vous souhaiteriez générer des pages statiques. Pour se faire, la fonction generateStaticParams le permet :

Cette fonction nécessite également d'être exportée dans le fichier page.tsx de votre routage.

Distribution des contenus statiques via CDN

Outre l'avantage de profiter de pages légères et performantes (puisqu'elles ne contiennent aucune donnée à chargée préalable pour leur affichage), vous pourriez décider d'aller plus loin.

Puisque votre application sera probablement requêtée depuis plusieurs régions à travers la planète et pour éviter des temps de latence excessifs, vous pourriez décider de stocker ces contenus statiques (fichiers HTML, images...) au plus proche de vos utilisateurs.

Pour se faire, la mise en place d'un CDN peut être également une excellente option. Si vous déployez votre application avec Vercel, vous profiterez dès le départ d'un CDN configuré pour vous, appelé Edge Network. Sinon vous pouvez facilement configurer votre CDN manuellement.

Mise en cache des données

Avec la fonction fetch

Si malgré tout votre page ne peut pas être statique car elle dépend d'un contexte spécifique (cookies, headers, searchParams...), vous pourriez tout à fait optimiser la récupération des données nécessaires à l'affichage par le biais de caches.

Si vous utilisez la fonction fetch, des paramètres supplémentaires de cache peuvent être utilisés pour la mise en cache :

await fetch("https://acme.com", { cache: "force-cache" });

L'ajout de l'option force-cache permet notamment ici d'insérer de manière indéfinie un cache pour le résultat de votre requête.

Pour d'autres données

Dans le cas où vous récupériez des données de votre base de données par exemple, vous pourrez utiliser la fonction cache de Next.js :

import { unstable_cache } from 'next/cache'
import { db, posts } from '@/lib/db'
 
const getPosts = unstable_cache(
  async () => {
    return await db.select().from(posts) // callback résultat mis en cache
  },
  ['posts'], // clé de cache
  { revalidate: 3600, tags: ['posts'] } // invalidation du cache
)

Optimiser le temps de chargement des pages grâce au streaming

L'affichage d'une page nécessite que l'ensemble des composants serveurs qui la compose soient chargés pour être terminée.

Le problème est que vous serez amené à créer des pages qui se composent sous forme de plusieurs blocs nécessitant des données distinctes qui peuvent mettre plus ou moins de temps à charger.

Imaginons une page panier incluant ces 2 différents blocs :

• Produits ajoutés dans le panier - Temps de réponse de l'API 1 seconde
• Produits que vous pourriez aimer - Temps de réponse de l'API 3 secondes

Sans action de votre part, cette page nécessite d'avoir tous ses blocs (composants serveurs) avec leur rendu finalisé, soit environ 3 secondes.

Pourtant, ce temps de chargement pourrait être optimisé pour afficher petit à petit les blocs prêts à être rendus. Cela est possible grâce au streaming.

Pour activer cette optimisation, encapsulez vos composants respectifs dans un composant Suspense de React :

import Products from "./Products"
import RelatedProducts from "./RelatedProducts"

const CartPage = () => {
  return (
    <div>
      <Suspense fallback={<p>Chargement des produits...</p>}>
        <Products />
      </Suspense>
      <Suspense fallback={<p>Chargement...</p>}>
        <RelatedProducts />
      </Suspense>
    </div>
  );
}

Désormais, votre page pourra être affichée instantanément avec le(s) layout(s) ajoutés puis vos blocs de page pourront être rendus au fur et à mesure que les données sont disponibles.