Comprendre et corriger le FOUC dans l'application Next.js App Router (Guide 2025)

FOUC, ou Flash de Contenu Non Formaté, est un défaut visuel dans les applications React où le contenu non formaté apparaît brièvement pendant le chargement. Il se produit lorsque le HTML est rendu avant que le CSS ne soit appliqué, souvent en raison de désaccords entre le HTML rendu par le serveur et l'interface utilisateur rendue par le client dans des frameworks comme Next.js. Les symptômes incluent l'affichage de HTML brut avant que les styles ne prennent effet et les variables CSS qui ne s'appliquent pas immédiatement. Les causes courantes incluent la mise en page dynamique, l'utilisation de `Date.now()` ou `Math.random()` dans des composants partagés, et l'importation de bibliothèques CSS trop tard. Pour corriger le FOUC, importez toujours le CSS global dans `layout.tsx` pour vous assurer que les styles sont chargés tôt. Fournir des styles de thème de remplacement dans `globals.scss` empêche les éléments non formatés de clignoter. Utiliser une garde d'hydratation retarde le rendu jusqu'à ce que le client prenne le relais, empêchant les désaccords. Évitez les imports de CSS dynamiques, l'utilisation de `Date.now()` ou `Math.random()` directement dans le rendu, et la lecture à partir de `localStorage` ou `window` dans les composants serveur. Séparer la logique serveur de la mise en page spécifique au client élimine les flashes de style et les avertissements d'hydratation.