Comment les sites Framer deviennent-ils interactifs ?

Un site web est composé de HTML et rendu interactif avec JavaScript. Pour garantir un chargement initial rapide de la page, nous envoyons d'abord le HTML, afin que les utilisateurs (et les moteurs de recherche) voient le contenu le plus rapidement possible. Cela s'appelle généralement le rendu côté serveur.

En parallèle, nous chargeons le JavaScript nécessaire pour un processus appelé "hydratation" (oui, comme arroser des plantes 🫗🪴). Le processus lui-même est géré par notre framework de choix, React, qui alimente chaque site Framer. Techniquement, l'hydratation prend le HTML reçu et attache des écouteurs d'événements, par exemple, cela permet aux éléments d'écouter les ‘clics’ ou le ‘défilement’. C'est à ce moment que votre site web est capable de traiter les interactions des utilisateurs et que nous l'appelons ‘interactif’.

Certains des éléments basés sur JavaScript ont besoin de données qui doivent être récupérées depuis le serveur pour fournir de l'interactivité. Par exemple, notre page d'accueil a besoin de l'état de connexion de l'utilisateur dans les zones marquées en rouge :

Sur d'autres sites Framer, cela pourrait être la récupération d'avis, des derniers articles de blog ou même juste la météo. Chaque récupération prend un peu de temps. Surtout si une récupération en entraîne une autre, ce qui est assez courant. Tout cela se fait pendant l'hydratation.

À partir d'ici, nous allons entrer dans des détails plus techniques pour vous montrer ce qui se passe véritablement sous le capot. Si vous êtes moins intéressé par les détails techniques, vous pouvez passer directement aux résultats dans le dernier chapitre.