Nuxt offre deux approches principales pour optimiser la performance des composants : Lazy et ClientOnly. L'utilisation de <LazyMonComposant /> permet le "code-splitting" automatique, isolant le composant dans un fichier séparé. Cela allège le bundle JavaScript initial, accélérant le téléchargement et l'analyse par le navigateur, et le code n'est chargé que lorsque le composant est nécessaire.
L'encadrement d'un composant par <ClientOnly> désactive son rendu côté serveur (SSR). Bien que son code reste inclus dans le bundle JavaScript, cette méthode réduit la charge du serveur et prévient les erreurs d'hydratation si le composant utilise des API spécifiques au navigateur. Cependant, le contenu n'est pas présent dans le HTML initial, ce qui peut entraîner des décalages visuels et impacter le référencement naturel.
La combinaison de Lazy et ClientOnly offre un gain de performance optimal en différant à la fois le SSR et le chargement du JavaScript. Cette approche est idéale pour les composants complexes et interactifs non essentiels au SEO, permettant au serveur de répondre rapidement et à la page de s'afficher sans délai avec un minimum de code, le composant se chargeant ensuite en arrière-plan sur le client.
