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.
Cet article explore le potentiel du streaming HTML pour améliorer les performances des sites web modernes. Sébastien Mischler, développeur chez Infomaniak, revisite cette technique inspirée d'un article de Chris Coyier, en s'appuyant sur un projet expérimental appelé HTMS. L'article souligne que les problèmes de performance actuels proviennent souvent du rendu retardé par l'hydration côté client et les pipelines JavaScript lourds, plutôt que de la vitesse du réseau. Le streaming HTML permet de rendre le contenu progressivement dès son arrivée, améliorant ainsi les métriques clés comme le First Contentful Paint et l'expérience utilisateur. Bien que les solutions comme le SSR (Server-Side Rendering) et le SSG (Static Site Generation) existent, elles présentent des limites, notamment avec les données dynamiques. Le streaming HTML offre une alternative prometteuse pour concilier SEO, accessibilité et performances.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre