Wie werden Framer-Websites interaktiv?

Eine Website besteht aus HTML und wird mit JavaScript interaktiv gemacht. Um sicherzustellen, dass das anfängliche Laden der Seite schnell ist, senden wir zuerst HTML, damit Benutzer (und Suchmaschinen) Inhalte so schnell wie möglich sehen. Dies wird normalerweise serverseitiges Rendern genannt.

Parallel laden wir das JavaScript, das für einen Prozess namens “Hydration” benötigt wird (ja, wie das Bewässern von Pflanzen 🫗🪴). Der Prozess selbst wird von unserem bevorzugten Framework, React, das jede Framer-Website antreibt, gesteuert. Technisch gesehen nimmt die Hydration das empfangene HTML und fügt Ereignis-Listener hinzu, z.B. lässt sie Elemente auf 'Klicks' oder 'Scrollen' reagieren. Dies ist der Moment, in dem Ihre Website in der Lage ist, Benutzerinteraktionen zu verarbeiten und wir es als ‘interaktiv’ bezeichnen.

Einige der auf JavaScript basierenden Elemente benötigen Daten, die vom Server abgerufen werden müssen, um Interaktivität zu bieten. Zum Beispiel benötigt unsere Homepage den Anmeldestatus des Benutzers in den rot markierten Bereichen:

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

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