Il est très important pour l'organisme de rester bien hydraté. Boire beaucoup d'eau permet à votre corps de fonctionner en douceur et l'aide à faire son travail correctement.L'eau contenue dans notre corps est essentielle pour de nombreuses choses importantes. Elle aide notre sang à transporter des éléments importants comme le glucose et l'oxygène vers nos cellules. Elle aide également nos reins à éliminer les substances dont nous n'avons pas besoin. De plus, il assure le bon fonctionnement de nos articulations et de nos yeux. Il facilite la digestion et permet à la peau de rester belle.
Trêve de plaisanteries, soyons sérieux.
En programmation, l'hydratation est le processus par lequel le navigateur ajoute de l'interactivité aux éléments qu'il affiche à l'écran.
Voici comment cela se passe :
- Client : Donnez-moi le code HTML pour l'URL "/profile"
- Serveur : J'ai compris, voici le code HTML
- Le client : Merci, je vais afficher ce HTML maintenant
- Le client : Je dois maintenant ajouter de l'interactivité aux éléments affichés.
Cette dernière étape est l'étape d'hydratation.
Pour ajouter de l'interactivité aux éléments affichés, le navigateur doit charger, traiter et exécuter le fichier bundle.js.
Voici la présentation visuelle où cela se passe :
Il est important de se rappeler que pendant que le navigateur charge, traite et exécute JavaScript, les éléments de la page sont visibles pour l'utilisateur mais ne sont pas interactifs.
Plus vous avez de code JavaScript, plus cette fenêtre de temps sera longue. En effet, le navigateur a besoin de plus de temps pour charger tout ce code.
Comment optimiser ?
Il existe plusieurs façons d'optimiser le processus d'hydratation.
La première, et la plus évidente, consiste à charger moins de code JavaScript. Moins de code JavaScript signifie un temps d'hydratation plus court, ce qui implique une interactivité plus rapide de la page.
Veillez donc à ajuster la taille de votre bundle.js pour vos pages.
La deuxième chose que vous pouvez faire est de ne charger que le code JavaScript dont vous avez besoin sur cette page.
Par exemple, si vous n'utilisez pas chart.js sur la page d'inscription, assurez-vous qu'il ne se charge pas sur cette page.
Vous pouvez utiliser des outils tels que source-map-explorer pour obtenir des informations sur les bibliothèques qui augmentent la taille de votre paquet. Après cette étape, vous pouvez utiliser des techniques telles que le lazy loading, le découpage du code ou les importations dynamiques pour réduire la taille du paquet.
Lorsque vous travaillez avec des bibliothèques externes, veillez également à vérifier leur taille. Vérifiez également si elles sont bien maintenues et quand a eu lieu le dernier commit. Vous pouvez également utiliser des outils comme bundlephobia.com pour vérifier des informations sur des bibliothèques spécifiques :
La troisième et dernière chose que vous pouvez faire pour améliorer l'hydratation est de vous appuyer sur les frameworks. Ils ont leurs propres mécanismes pour gérer le processus d'hydratation :
- Dans React 18, il existe une fonctionnalité appelée mode concurrent. Elle permet à React de décider quelles parties d'une page web doivent devenir interactives en premier. Elle se concentre donc sur l'interactivité des parties importantes en premier. Elle prend son temps avec les éléments moins importants. Ainsi, les parties interactives apparaissent rapidement.
- SvelteKit utilise le compilateur de Svelte pour générer un code JavaScript hautement optimisé pour l'hydratation. Lors de la compilation, SvelteKit transforme les modèles de composants en fonctions JavaScript efficaces. Ces fonctions manipulent directement le DOM. Cette approche minimise les frais généraux de l'hydratation. Il en résulte des temps de chargement plus rapides et des performances améliorées.
- Astro utilise l'architecture "Islands", qui permet une hydratation partielle. Cela signifie qu'Astro identifie les composants individuels ou les sections d'une page web. Il les hydrate également de manière indépendante. Cette approche optimise le processus d'hydratation. Le principal avantage est la réduction du temps nécessaire pour que la page devienne interactive.
- Qwik utilise un concept appelé "resumability", qui élimine le besoin d'hydratation. Swik ne s'appuie pas sur l'hydratation. Qwik pré-rend et met en cache l'état complet de l'application sur le serveur. Par conséquent, les utilisateurs bénéficient d'un chargement instantané des pages sans attendre la fin de l'hydratation.
C'est à vous de choisir l'approche qui vous convient le mieux. Veillez simplement à bien faire les choses et à gérer le processus d'hydratation avec élégance.
Source : "What is hydration and why it's important?" (Mensur Durakovic)
Et vous ?
Quel est votre avis sur le sujet ?Voir aussi :
Situations désagréables : 50 façons professionnelles de dire à quelqu'un d'aller au diable, par Mensur Durakovic 10 vérités difficiles à avaler que l'on ne vous dira pas sur le métier d'ingénieur logiciel, par Mensur Durakovic, ingénieur logiciel