Es gibt verschiedene Arten der Flüssigkeitszufuhr, die verwendet werden können. Erfahren Sie mehr über sie und wie sie verwendet werden können, um Ihre Benutzer besser zu bedienen.
Rehydration, oder einfacher ‘Hydratation,’ ist ein Begriff, der oft auftaucht, wenn wir uns SPAs und serverseitiges Rendering ansehen.
Die Flüssigkeitszufuhr wirkt sich im Wesentlichen nicht auf die Suchmaschinenoptimierung aus, ist jedoch ein wesentlicher Schritt für die Bereitstellung gerenderter Seiten für den Benutzer.
Es gibt verschiedene Arten der Flüssigkeitszufuhr, die verwendet werden können.
Verschiedene Tech-Stacks und Frameworks unterstützen möglicherweise bereits verschiedene Arten der Hydratation.
Contents
Was ist Rehydration?
Einfach ausgedrückt, ermöglicht Rehydration einer Webanwendung oder -seite, ihren interaktiven Zustand zu erreichen, nachdem sie auf der Serverseite gerendert wurde.
Dies mag für Suchmaschinen keine Rolle spielen, ist aber unerlässlich, um richtig zu machen, wenn die Website gerenderte, interaktive Komponenten für Benutzer bereitstellt.
Dieser Prozess wird in Single-Page-Anwendungen (SPAs) neben serverseitigem Rendering verwendet, was ein schnelleres erstes Contentful Paint (FCP) ermöglicht, und clientseitiger Inhalt ist „hydratisiert“ für das größte Contentful Paint (LCP).
Der Prozess umfasst daher das Erfassen des aktuellen Status der Seite oder App auf der Clientseite, die vom Renderer serialisiert wird, und das Booten der JavaScript-Komponenten in die Interaktivität mithilfe von JavaScript, das in der HTML-Antwort geladen oder verlinkt ist.
Als übergreifender Begriff bedeutet Hydratation in diesem Fall, dass alle Komponenten auf der Webseite initialisiert werden.
Dies kann zu besseren Ergebnissen von Core Web Vital führen und erfordert von Natur aus weniger Aufwand für den Googlebot, um die Webseite zu rendern. Darüber hinaus können Suchmaschinen Seiten schneller indizieren, da dies nicht über den WRS (Web Rendering Service) von Google erfolgen muss.
Progressive Rehydration erklärt
Progressive Rehydration optimiert das Rendern und die Interaktivität einzelner Komponenten und umfasst sowohl serverseitiges Rendern als auch clientseitiges Rendern (CSR), wenn Teile einer Seite im Laufe der Zeit gebootet werden.
Progressive Rehydration ermöglicht es JavaScript-Komponenten, im Wesentlichen Lazy-Loaded zu sein, wobei Knoten im Laufe der Zeit hydratisiert werden, anstatt dass alle Knoten gleichzeitig hydratisiert werden.
Dadurch können Komponenten, die möglicherweise nicht unbedingt erforderlich sind, später initialisiert werden, wodurch die Gesamtladezeit verkürzt wird.
Tatsächlich können sowohl Benutzer als auch Suchmaschinen-Bots und Crawler die Seiten sehen und mit ihnen interagieren, sobald HTML gerendert wird – noch bevor das JavaScript ausgeführt wird.
Die progressive Rehydratation hilft auch dabei, häufige SSR-Fallstricke zu vermeiden, z. B. wenn ein vom Server gerenderter DOM-Baum (Document Object Model) zerstört und sofort neu erstellt wird.
Was ist partielle Rehydration?
Eine andere Form der Rehydratation, die partielle Rehydratation, ermöglicht die selektive Hydratation von JavaScript-Komponenten – oder genauer gesagt ‘Inseln’ – ohne alle Komponenten hydratisieren zu müssen.
Die Technik kombiniert sowohl SSR als auch CSR.
In diesem Szenario sendet der Server ein anfängliches HTML-Dokument zusammen mit vom Server gerenderten Inhalten an den Client. Nach dem Laden initiiert und manipuliert das clientseitige JavaScript das DOM, um vorhandene Inhalte auf bestimmten Inseln hinzuzufügen oder zu aktualisieren.’
Dies bedeutet, dass das JavaScript selektiv Teile der Seite aktualisiert und nicht die Gesamtheit.
Die partielle Rehydratation wird als leistungsstarke Technik zur Leistungsoptimierung von SPAs für Ladeleistung und Effizienz angesehen.
Das heißt, es hat seine Probleme, da es Herausforderungen für das Caching und die clientseitige Navigation darstellen kann.
Ein Blick auf trisomorphes Rendering
Trisomorphes Rendering ist sowohl in der Entwicklungs- als auch in der technischen SEO-Community weniger verbreitet.
Der Prozess umfasst das Rendern von SPAs auf Server- und Clientseite sowie das Rendern von HTML für die Verwendung von Navigationen durch einen Servicemitarbeiter.
Der Prozess verwendet eine Mischung aus serverseitigem Streaming-Rendering, das anfängliche Navigationen rendert, und der Servicemitarbeiter rendert HTML für Navigationen. Das serverseitige Streaming-Rendering stellt sicher, dass die erforderlichen Inhalte an Suchmaschinen gesendet werden.
In der Welt der Entwicklung bedeutet dies, dass zwischengespeicherte Komponenten und Vorlagen auf dem neuesten Stand gehalten werden können und dass Navigationen im SPA-Stil zum Rendern neuer Ansichten in derselben Sitzung aktiviert werden können.
Wann ist es am besten, Rehydration zu verwenden?
Rehydration ist eine Notwendigkeit für Websites, die hochgradig interaktiv sein müssen, wie z. B. Einzelseitenanwendungen, da sie schnellere Anfangsladezeiten und eine verbesserte Benutzererfahrung ermöglicht.
Die Auswahl einer bestimmten Art der Flüssigkeitszufuhr erfordert Kenntnisse darüber, wie Ihr Tech-Stack funktioniert und was für Ihre Website am besten funktioniert.
Es gibt auch Alternativen zur Hydratation, wie z. B. die Wiederaufnahmefähigkeit, die sich davon unterscheidet, wo und wann der Code ausgeführt wird.
Die Wiederaufnahmefähigkeit kann eine Alternative zur Flüssigkeitszufuhr sein und kann die Ausführung von JavaScript beim Start der Seite fast überflüssig machen. das bedeutet fast „sofortige“ Apps im Vergleich zu einem Hydratationsprozess.
Wenn der Client eine Anfrage an den Server sendet, erstellt der Server zuerst die Anwendung neu und serialisiert sie in HTML. Der HTML-Code wird dann an den Client zurückgegeben.
Der Client setzt dann die Anwendung ab dem Punkt fort, an dem der Server sie serialisiert hat. Wenn ein Benutzer dann mit einem Seitenelement interagiert, wird nur dieser Ereignishandler angefordert und bei Bedarf ausgeführt.
Fortsetzbarkeit und fortsetzbare Frameworks sind nicht neu. Google hat ein fortsetzbares Framework mit dem internen Namen Wiz für Such- und Fotoprodukte verwendet, und eBay verwendet ein Framework namens Marko, das die Fortsetzbarkeit als Funktion hinzugefügt hat.