Rehydratatie, of eenvoudiger “hydratatie”, is een term die vaak voorkomt als we kijken naar SPA’s en server-side rendering.

Hydratatie heeft niet wezenlijk invloed op SEO, maar het is een essentiële stap bij het leveren van gerenderde pagina’s aan de gebruiker.

Er zijn verschillende soorten hydratatie die kunnen worden gebruikt.

Verschillende stapels en technologische kaders kunnen al verschillende soorten hydratatie ondersteunen.

Wat is rehydratatie?

Simpel gezegd, door rehydratie kan een webapplicatie of pagina zijn interactieve status bereiken nadat deze aan de serverzijde is weergegeven.

Dit maakt misschien niet uit voor zoekmachines, maar het is absoluut noodzakelijk om het goed te doen als de website interactieve componenten biedt die voor gebruikers worden weergegeven.

Dit proces wordt gebruikt in toepassingen met één pagina (SPA’s) in combinatie met weergave aan de serverzijde, waardoor snellere First Contentful Paint (FCP) en client-inhoud worden “gehydrateerd” voor meer paint large content (LCP).

Het proces omvat daarom het vastleggen van de huidige status van de pagina of applicatie aan de clientzijde, geserialiseerd door de renderer, waarbij de JavaScript-componenten in interactiviteit worden gestart via JavaScript dat is geladen of gekoppeld in het HTML-antwoord.

Als algemene term betekent hydratatie in dit geval dat alle componenten van de webpagina worden geïnitialiseerd.

Dit kan leiden tot betere Core Web Vital-resultaten en vereist inherent minder inspanning van Googlebot om de webpagina weer te geven. Daarnaast kunnen zoekmachines pagina’s sneller indexeren, aangezien dit niet via de WRS (Web Rendering Service) van Google hoeft te gaan.

Verklaring van progressieve rehydratie

Progressieve rehydratatie optimaliseert de weergave en interactiviteit van individuele componenten en omvat zowel server-side rendering als client-side rendering (CSR), aangezien fragmenten van een pagina in de loop van de tijd worden geïnitialiseerd.

Door progressieve rehydratatie kunnen JavaScript-componenten in wezen op een luie manier worden geladen, waarbij knooppunten in de loop van de tijd worden gehydrateerd in plaats van dat alle knooppunten tegelijk worden gehydrateerd.

Hierdoor kunnen componenten die misschien niet essentieel zijn later worden geïnitialiseerd, waardoor de algehele laadtijd korter wordt.

In feite kunnen zowel gebruikers als bots en crawlers van zoekmachines beginnen met het bekijken van en interactie met pagina’s zodra HTML wordt weergegeven, zelfs voordat JavaScript wordt uitgevoerd.

Progressieve rehydratatie helpt ook veelvoorkomende SSR-valkuilen te voorkomen, zoals wanneer een door de server gegenereerde Document Object Model (DOM)-structuur wordt vernietigd en onmiddellijk opnieuw wordt opgebouwd.

Wat is gedeeltelijke rehydratie?

Een andere vorm van rehydratatie, gedeeltelijke rehydratatie, maakt selectieve hydratatie van JavaScript-componenten – of meer specifiek ‘eilanden’ – mogelijk zonder dat alle componenten moeten worden gehydrateerd.

De techniek combineert SSR en CSR.

In dit scenario stuurt de server een initieel HTML-document samen met door de server gerenderde inhoud naar de client. Eenmaal geladen, start het JavaScript aan de clientzijde en manipuleert het de DOM om bestaande inhoud in de opgegeven “eilanden” toe te voegen of bij te werken.

Dit betekent dat JavaScript selectief delen van de pagina bijwerkt in plaats van de hele pagina.

Gedeeltelijke rehydratatie wordt beschouwd als een krachtige techniek om de prestaties van SPA’s te optimaliseren voor prestaties en oplaadefficiëntie.

Dat gezegd hebbende, het heeft zijn problemen, omdat het uitdagingen kan opleveren voor caching en browsen aan de clientzijde.

Een blik op trisomorfe representatie

De trisomorfe representatie komt minder vaak voor in zowel de ontwikkelings- als de SEO-technische gemeenschap.

Het proces omvat het renderen van SPA’s aan de server- en clientzijde, evenals een servicemedewerker om HTML weer te geven voor gebruik door navigatie.

Het proces maakt gebruik van een combinatie van real-time weergave aan de serverzijde, die de initiële navigatie weergeeft, en de servicemedewerker geeft HTML weer voor de navigatie. Streaming server rendering zorgt ervoor dat de benodigde inhoud naar zoekmachines wordt gestuurd.

In de ontwikkelingswereld betekent dit dat componenten en sjablonen in de cache up-to-date kunnen worden gehouden en dat navigatie in SPA-stijl kan worden ingeschakeld om nieuwe weergaven in dezelfde sessie weer te geven.

Wanneer kun je het beste rehydratatie gebruiken?

Rehydratatie is een must voor websites die zeer interactief moeten zijn, zoals apps met één pagina, omdat het zorgt voor snellere initiële laadtijden en een betere gebruikerservaring.

Het kiezen van een specifiek type hydratatie vereist dat u weet hoe uw technologiestack werkt en wat het beste werkt voor uw website.

Er zijn ook alternatieven voor hydratatie, zoals herstelbaarheid, die verschilt afhankelijk van waar de code wordt uitgevoerd en wanneer deze wordt uitgevoerd.

Reactivering kan een alternatief zijn voor hydratatie en kan bijna de noodzaak elimineren om JavaScript uit te voeren terwijl de pagina wordt geladen, wat bijna “directe” toepassingen betekent in vergelijking met een hydratatieproces.

Wanneer de client een verzoek naar de server stuurt, herbouwt de server eerst de applicatie en serialiseert deze naar HTML. De HTML wordt vervolgens teruggestuurd naar de client.

De client hervat vervolgens de toepassing vanaf het punt waar de server deze heeft geserialiseerd; wanneer een gebruiker interactie heeft met een element op de pagina, wordt alleen deze gebeurtenishandler opgevraagd en op verzoek uitgevoerd.

Reproduceerbaarheid en hervatbare kaders zijn niet nieuw. Google heeft een intern hervatbaar raamwerk genaamd Wiz gebruikt voor zoek- en fotoproducten, en eBay gebruikt een raamwerk genaamd Marko dat hervatten als een functie heeft toegevoegd.

Meer middelen:

Uitgelichte afbeelding: UnderhilStudio/Shutterstock

Source link