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 dyker upp när vi tittar på SPA:er och rendering på serversidan.
Hydrering påverkar i huvudsak inte sökmotoroptimering (SEO), men är ett viktigt steg för att visa renderade sidor för användaren.
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å det rätt om webbplatsen visar renderade, interaktiva komponenter för 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). Klientsidans innehåll hydreras för Largest Contentful Paint (LCP).
Processen omfattar att fånga sidans eller appens aktuella tillstånd på klientsidan, vilket serialiseras av renderaren. JavaScript-komponenterna startas sedan upp till interaktivt läge med hjälp av JavaScript som laddats in eller länkats till i HTML-responsen.
Hydrering innebär i detta fall att alla komponenter på webbsidan initieras. Detta kan leda till bättre Core Web Vitals-resultat och minskar Googles ansträngning för att rendera webbsidan. Dessutom kan sökmotorer indexera sidor snabbare eftersom de inte behöver passera genom Googles WRS (Web Rendering Service).
Förklaring till progressiv rehydrering
Progressiv rehydrering optimerar renderingen och interaktiviteten hos enskilda komponenter. Det innebär att rendering på serversidan och rendering på klientsidan (CSR) kombineras, där delar av en sida startas upp successivt.
Progressiv rehydrering gör det möjligt för JavaScript-komponenter att laddas fördröjt (lazy-loading). Noder hydreras över tid snarare än att alla noder hydreras samtidigt. Detta förbättrar laddningstiden genom att komponenter som inte är omedelbart nödvändiga initieras senare.
Både användare och sökmotorrobotar kan börja se och interagera med sidorna så snart HTML har renderats – även innan JavaScript körs.
Progressiv rehydrering hjälper också till att undvika vanliga SSR-fallgropar, exempelvis att ett serverrenderat Document Object Model-träd (DOM) förstörs och byggs om direkt.
Vad är partiell rehydrering?
Partiell rehydrering möjliggör selektiv hydrering av JavaScript-komponenter – eller ”öar” – utan att hela sidan behöver hydreras.
Tekniken kombinerar SSR och CSR. Servern skickar ett initialt HTML-dokument med serverrenderat innehåll till klienten. JavaScript på klientsidan initierar och hanterar sedan DOM:en för att uppdatera eller lägga till innehåll på specifika ”öar”.
Detta innebär att JavaScript selektivt uppdaterar delar av sidan snarare än hela sidan.
Partiell rehydrering ses som en kraftfull teknik för prestandaoptimering av SPA:er, men kan skapa utmaningar för cachelagring och klientsidans navigering.
En titt på trisomorf (’trisomorphic’) rendering
Trisomorf rendering är mindre vanligt inom utvecklings- och tekniska SEO-kretsar. Processen innebär rendering av SPA:er på serversidan, klientsidan och via en service worker för att rendera HTML vid navigering.
Strömmande serversiderendering används för initiala navigeringar, medan service workern renderar HTML för efterföljande navigeringar. Detta säkerställer att nödvändigt innehåll skickas till sökmotorer.
I utvecklingssammanhang gör detta det möjligt att cachelagra komponenter och mallar samt erbjuda SPA-liknande navigeringar inom samma session.
När är det bäst att använda rehydrering?
Rehydrering är nödvändigt för mycket interaktiva webbplatser, som SPA:er. Det bidrar till snabbare initiala laddningstider och förbättrad användarupplevelse.
Att välja en viss typ av hydrering kräver kunskap om din tekniska stack och vad som fungerar bäst för din webbplats.
Alternativ till hydrering: återupptagbarhet
Ett alternativ till hydrering är återupptagbarhet, vilket minskar behovet av att JavaScript körs vid sidans start och kan resultera i nästan omedelbara applikationer.
Google använder internt ett återupptagbart ramverk vid namn Wiz för sök- och fotoprodukter, och eBay använder Marko, som har implementerat återupptagbarhet som en funktion.
