Comment les sites Framer deviennent-ils interactifs ?

Un site web est composé de HTML et rendu interactif avec JavaScript. Pour garantir que le chargement initial de la page soit rapide, 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, elle fait en sorte que les éléments écoutent 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 mène à une autre récupération, ce qui est assez courant. Tout cela se fait pendant l'hydratation.

À partir de maintenant, nous allons devenir plus techniques pour vous montrer ce qui se passe réellement 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.