Wie werden Framer-Seiten interaktiv?

Eine Website besteht aus HTML und wird mit JavaScript interaktiv gemacht. Um sicherzustellen, dass die anfängliche Seitenladung schnell ist, senden wir zuerst HTML, damit Benutzer (und Suchmaschinen) den Inhalt so schnell wie möglich sehen. Dies wird normalerweise als serverseitiges Rendering bezeichnet.

Parallel laden wir das JavaScript, das für einen Prozess namens „Hydration“ benötigt wird (ja, wie Pflanzen gießen 🫗🪴). Der Prozess selbst wird von unserem bevorzugten Framework, React, behandelt, das jede Framer-Website antreibt. Technisch gesehen nimmt die Hydration das empfangene HTML und fügt Ereignislistener hinzu, z. B. wird es den Elementen beibringen, auf „Klicks“ oder „Scrollen“ zu hören. Dies ist der Zeitpunkt, an dem Ihre Website in der Lage ist, Benutzerinteraktionen zu verarbeiten und wir es ‚interaktiv‘ nennen.

Einige der JavaScript-basierten Elemente benötigen Daten, die vom Server abgerufen werden müssen, um Interaktivität bereitzustellen. Zum Beispiel benötigt unsere Startseite den Anmeldestatus des Benutzers in den rot markierten Bereichen:

Auf anderen Framer-Seiten könnte es darum gehen, Bewertungen, die neuesten Blog-Posts oder sogar einfach nur das Wetter abzurufen. Jeder Abruf dauert eine kleine Weile. Besonders wenn ein Abruf zu einem weiteren Abruf führt, was ziemlich häufig vorkommt. All dies geschieht während der Hydration.

Von hier aus werden wir technischer, um Ihnen zu zeigen, was tatsächlich im Hintergrund passiert. Wenn Sie weniger an den technischen Details interessiert sind, können Sie direkt zu den Ergebnissen im letzten Kapitel springen.