Next.js 14 a apporté des améliorations significatives des performances grâce à l'App Router et aux React Server Components. Dans cet article, nous explorons des stratégies concrètes pour tirer le meilleur parti de vos applications Next.js et atteindre des scores Lighthouse supérieurs à 90.

1. Utiliser les Server Components par défaut

Les Server Components se rendent côté serveur et n'envoient aucun JavaScript au client. Utilisez-les pour tout composant qui n'a pas besoin d'interactivité ou d'API du navigateur. La règle clé : ne recourez à 'use client' que lorsque vous avez absolument besoin de state, d'effets ou de gestionnaires d'événements.

2. Optimiser les images avec next/image

Utilisez toujours le composant Image de next/image pour bénéficier de la conversion WebP automatique, du lazy loading et de l'optimisation de taille. Définissez la prop priority sur les images au-dessus de la ligne de flottaison pour éliminer les délais LCP. Définissez correctement width et height, ou utilisez fill avec un parent dimensionné pour éviter les décalages de mise en page.

3. Récupération de données en parallèle

Évitez les requêtes en cascade en utilisant Promise.all pour les récupérations de données indépendantes. Plutôt que d'await séquentiellement, lancez toutes les requêtes en même temps et attendez le résultat combiné — cela seul peut réduire le temps de chargement d'une page de moitié sur les pages chargées en données.