Rehydratatie voor weergave aan de client- of serverzijde

Rehydratatie, of kortweg “hydratatie”, is een term die veel voorkomt als we kijken naar SPA en server-side rendering. Hydratatie heeft weinig tot geen invloed op SEO, maar is een essentiële stap bij het weergeven van door gebruikers gegenereerde pagina’s. Er kunnen verschillende irrigatiemethoden worden gebruikt. Verschillende technologiesuites en -systemen kunnen al verschillende soorten hydratatie ondersteunen.

Wat is rehydratie?

Simpel gezegd, rehydratie stelt een webapplicatie of pagina in staat om een ​​interactieve staat te bereiken nadat deze aan de serverzijde is weergegeven. Dit maakt misschien niet uit voor zoekmachines, maar het is noodzakelijk om het goed te doen als de website gebruikers gerenderde interactieve componenten moet bieden. Dit proces wordt gebruikt in Single Page Applications (SPA’s) in combinatie met server-side rendering, wat zorgt voor snellere First Contentful Paint (FCP) terwijl client-side content wordt “gehydrateerd” voor Maximum Content Paint (LCP). Daarom omvat het proces het vastleggen van de huidige status van de pagina of applicatie aan de clientzijde, die opeenvolgend wordt afgehandeld door de renderer, waardoor JavaScript-componenten worden geactiveerd om te communiceren met JavaScript dat is geladen of gekoppeld aan het HTML-antwoord. In dit geval betekent hydratatie dat alle componenten van de webpagina worden geïnitialiseerd. Dit kan u helpen betere Core Web Vital-resultaten te behalen en vereist minder inspanning van Googlebot om de webpagina weer te geven. Ook kunnen zoekmachines pagina’s sneller indexeren omdat het niet via de WRS (Web Rendering Service) van Google hoeft te gaan.

Progressieve rehydratatie uitgelegd

Progressieve rehydratatie optimaliseert de weergave en interactiviteit van individuele componenten en omvat zowel server-side als client-side rendering (CSR) aangezien delen van de pagina in de loop van de tijd worden weergegeven. Door incrementele rehydratatie kunnen JavaScript-componenten in wezen lui worden geladen door knooppunten in de loop van de tijd te rehydrateren in plaats van alle knooppunten tegelijk. Hierdoor kunnen componenten die mogelijk niet nodig zijn later worden geïnitialiseerd, waardoor de algehele laadtijd wordt verkort. In feite kunnen zowel gebruikers als zoekbots en crawlers beginnen met het zien en gebruiken van pagina’s zodra HTML wordt weergegeven, zelfs voordat JavaScript wordt uitgevoerd. Geleidelijke rehydratatie helpt ook veelvoorkomende SSR-valkuilen te vermijden, zoals het vernietigen en onmiddellijk opnieuw opbouwen van de door de server geleverde Document Object Model (DOM)-structuur.

Wat is gedeeltelijke rehydratie?

Een andere vorm van rehydratatie, gedeeltelijke rehydratatie, stelt u in staat om selectief JavaScript-componenten te hydrateren, of meer specifiek “eilanden”, zonder dat u alle componenten hoeft te hydrateren. Deze techniek combineert SSR en CSR. In dit geval stuurt de server het originele HTML-document naar de client samen met de door de server geleverde inhoud. Wanneer geladen, initialiseert en manipuleert JavaScript aan de clientzijde 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 vernieuwt in plaats van de hele pagina. Gedeeltelijke rehydratatie wordt beschouwd als een krachtige techniek om de efficiëntie en effectiviteit van de spa te optimaliseren. Toch heeft het problemen doordat het problemen kan veroorzaken bij het cachen en browsen aan de clientzijde.

Een blik op trisomorfe mapping

Trisomorphic mapping komt minder vaak voor in zowel de ontwikkelings- als de technische SEO-gemeenschappen. Het proces omvat het weergeven van de SPA aan de server- en clientzijde, evenals de servicemedewerker om de HTML weer te geven voor navigatie. Het proces maakt gebruik van een streaming server-rendering die de initiële navigatiehulpmiddelen biedt, terwijl de servicemedewerker de HTML voor browsen levert. Streaming server mapping zorgt ervoor dat de juiste content naar zoekmachines wordt gestuurd. In de ontwikkelingswereld betekent dit dat in de cache opgeslagen componenten en sjablonen voortdurend kunnen worden bijgewerkt en dat navigatietools in spa-stijl kunnen worden ingeschakeld om in dezelfde sessie nieuwe weergaven te bieden.

Wanneer kun je het beste rehydratatie gebruiken?

Rehydratatie is essentieel voor sites die zeer interactief moeten zijn, zoals applicaties met één pagina, omdat het zorgt voor snellere initiële laadtijden en een betere gebruikerservaring. Het kiezen van een specifiek irrigatietype vereist dat u weet hoe uw technologiestapel werkt en wat het beste werkt voor uw locatie. Er zijn ook alternatieven voor hydratatie, zoals updatebaarheid, die varieert afhankelijk van waar en wanneer de code wordt uitgevoerd. Verfrissen kan een alternatief zijn voor hydratatie en bijna de noodzaak elimineren om JavaScript uit te voeren bij het starten van een pagina – wat bijna “directe” toepassingen betekent in vergelijking met het hydratatieproces. Wanneer een client een verzoek naar een server stuurt, rendert de server eerst de toepassing en ontleedt deze in HTML. De HTML wordt vervolgens teruggestuurd naar de client. De client werkt vervolgens de applicatie bij vanaf het moment dat de server deze heeft geparseerd; wanneer de gebruiker vervolgens interactie heeft met een pagina-element, wordt alleen die gebeurtenishandler opgevraagd en op verzoek uitgevoerd. Upgrademogelijkheden en upgradebare systemen zijn niets nieuws. Google gebruikte intern een bij te werken systeem genaamd Wiz voor zoeken en foto’s, terwijl eBay een systeem gebruikt genaamd Marko dat bijwerkbaarheid als een functie heeft toegevoegd.
Meer middelen:

  • Servertoewijzing: SEO-voor- en nadelen
  • Hoe (en waarom) zoekmachines pagina’s rangschikken
  • Hoe zoekmachines werken

Uitgelichte afbeelding: UnderhilStudio/Shutterstock

Relevante berichten