Det finns olika typer av hydrering som kan användas. Lär dig om dem och hur de kan användas för att ge bättre service till dina användare.
Rehydrering, eller helt enkelt ”hydrering”, är en term som ofta kommer upp när vi tittar på SPA:er och rendering på serversidan.
Hydrering påverkar i huvudsak inte sökmotorsoptimering (SEO) men är ett viktigt steg för att visa renderade sidor för användaren.
Det finns olika typer av hydrering som kan användas. Olika tekniska stackar och ramverk kan redan stödja olika typer av hydrering.
Vad är rehydrering?
Enkelt uttryckt gör rehydrering att en webbapplikation eller sida når sitt interaktiva tillstånd efter att den har renderats på serversidan.
Detta kanske inte spelar någon roll för sökmotorer, men det är absolut nödvändigt att få till det rätt om webbplatsen visar renderade, interaktiva komponenter till användare.
Denna process används i enkelsidiga applikationer (SPA:er) tillsammans med rendering på serversidan, vilket möjliggör snabbare First Contentful Paint (FCP), och klientsidans innehåll hydreras för Largest Contentful Paint (LCP).
Processen omfattar därför att fånga sidans eller appens aktuella tillstånd på klientsidan som serialiseras av renderaren, starta upp JavaScript-komponenterna till interaktivt läge med hjälp av JavaScript som laddats in eller länkats till i HTML-responsen.
Som en övergripande term innebär hydrering i detta fall att alla komponenter på webbsidan initieras.
Detta kan leda till bättre Core Web Vital-resultat och kräver i sig mindre ansträngning från Googlebot för att rendera webbsidan. Dessutom kan sökmotorer indexera sidor snabbare, eftersom detta inte behöver passera genom Googles WRS (Web Rendering Service).
Förklaring till progressiv rehydrering
Progressiv rehydrering optimerar renderingen och interaktiviteten hos enskilda komponenter och involverar både rendering på serversidan och rendering på klientsidan (CSR) när delar av en sida startas upp över tid.
Progressiv rehydrering gör det möjligt för JavaScript-komponenter att i huvudsak vara fördröjt laddade (lazy-loading), där noder hydreras över tiden snarare än att alla noder hydreras på en gång.
Detta gör att komponenter som kanske inte är nödvändiga kan initieras senare, vilket gör den totala laddningstiden kortare.
Faktum är att både användare och sökmotorrobotar och sökrobotar kan börja se och interagera med sidorna så snart HTML renderas – även innan JavaScript körs.
Progressiv rehydrering hjälper också till att undvika vanliga SSR-fallgropar, till exempel där ett serverrenderat Document Object Model-träd (DOM) förstörs och omedelbart byggs om.
Vad är partiell rehydrering?
En annan form av rehydrering, partiell rehydrering, möjliggör selektiv hydrering av JavaScript-komponenter – eller, mer specifikt, ”öar” – utan att behöva hydrera alla komponenter.
Tekniken kombinerar både SSR och CSR.
I detta scenario skickar servern ett första HTML-dokument tillsammans med serverrenderat innehåll till klienten. När den har laddats initierar och hanterar JavaScript på klientsidan DOM:en för att lägga till eller uppdatera befintligt innehåll på angivna ”öar”.
Detta innebär att JavaScript selektivt uppdaterar delar av sidan snarare än helheten.
Partiell rehydrering ses som en kraftfull teknik för prestandaoptimering av SPA:er för laddningsprestanda och effektivitet.
Dock, med detta sagt, det har sina problem, eftersom det kan skapa utmaningar för cachelagring och navigering på klientsidan.
En titt på trisomorf rendering
Trisomorf rendering är mindre vanligt i både utvecklings- och tekniska SEO-grupper.
Processen involverar rendering av SPA:er över server- och klientsidor, samt på en service worker för att rendera HTML för användning av navigeringar.
Processen använder en blandning av strömmande serversiderendering, som renderar initiala navigeringar, och service workern renderar HTML för navigeringar. Renderingen på den strömmande serversidan säkerställer att det nödvändiga innehållet skickas till sökmotorer.
I utvecklingsvärlden innebär det att cachelagrade komponenter och mallar kan hållas uppdaterade och att SPA-liknande navigeringar för att rendera nya vyer i samma session kan aktiveras.
När är det bäst att använda rehydrering?
Rehydrering är en nödvändighet för webbplatser som behöver vara mycket interaktiva, till exempel enkelsidiga applikationer, eftersom det möjliggör snabbare initiala laddningstider och förbättrad användarupplevelse.
Att välja en viss typ av hydrering kräver kunskap om hur din tech stack fungerar och vad som fungerar bäst för din webbplats.
Det finns också alternativ till hydrering, till exempel återupptagbarhet, som skiljer sig åt på var koden exekveras och när den exekveras.
Återupptagbarhet kan vara ett alternativ till hydrering och kan nästan ta bort behovet av att JavaScript körs när sidan startar – vilket innebär nästan omedelbara appar jämfört med en hydreringsprocess.
När klienten skickar en begäran till servern bygger servern först om applikationen och serialiserar den till HTML. HTML-koden returneras sedan till klienten.
Klienten återupptar sedan applikationen från den punkt där servern serialiserade den. När sedan en användare interagerar med ett sidelement, begärs enbart den händelsehanteraren och exekveras på begäran.
Återupptagbarhet, och återupptagbara ramverk, är inte nya. Google har använt ett återupptagbart ramverk internt som heter Wiz för sök- och fotoprodukter, och eBay använder ett ramverk som heter Marko som har lagt till återupptagbarhet som en funktion.
