La rehidratació, o més simplement “hidratació”, és un terme que apareix sovint quan ens fixem en els SPA i renderització del costat del servidor.
La hidratació no afecta, en essència, el SEO, però és un pas essencial per oferir pàgines renderitzades a l’usuari.
Hi ha diferents tipus d’hidratació que es poden utilitzar.
Les diferents piles i marcs tecnològics ja poden suportar diferents tipus d’hidratació.
Què és la rehidratació?
En poques paraules, la rehidratació permet que una aplicació web o pàgina assoleixi el seu estat interactiu després de representar-se al costat del servidor.
Això pot no importar-ho els motors de cerca però és imprescindible fer-ho bé si el lloc web ofereix components interactius representats per als usuaris.
Aquest procés s’utilitza en aplicacions d’una sola pàgina (SPA) al costat de la representació del costat del servidor, que permet una First Contentful Paint (FCP) més ràpida, i el contingut del costat del client està “hidratat” per al Pintura de contingut més gran (LCP).
El procés, per tant, implica capturar l’estat actual de la pàgina o de l’aplicació al costat del client serialitzat pel renderitzador, arrencant els components JavaScript en interactivitat mitjançant JavaScript carregat o enllaçat a la resposta HTML.
Com a terme general, la hidratació, en aquest cas, significa que tots els components de la pàgina web s’inicien.
Això pot portar a millorar Core Web Vital resultats i, de manera inherent, requereix menys esforç de Googlebot per renderitzar la pàgina web. A més, els motors de cerca poden indexar pàgines més ràpidament, ja que això no ha de passar pel WRS (Web Rendering Service) de Google.
Explicació de la rehidratació progressiva
La rehidratació progressiva optimitza la representació i la interactivitat dels components individuals i implica tant la representació del costat del servidor com la representació del costat del client (CSR) a mesura que s’inicien fragments d’una pàgina amb el pas del temps.
La rehidratació progressiva permet que els components de JavaScript es carreguin essencialment de manera mandrosa, on els nodes s’hidraten amb el pas del temps en lloc d’hidratar tots els nodes alhora.
Això permet que els components que potser no siguin essencials s’inicialitzin més tard, fent que el temps total de càrrega sigui més curt.
De fet, tant els usuaris com els robots i els rastrejadors dels motors de cerca poden començar a veure i interactuar amb les pàgines tan bon punt es mostri HTML, fins i tot abans que s’executi JavaScript.
La rehidratació progressiva també ajuda a evitar inconvenients comuns de SSR, com ara quan es destrueix un arbre DOM (Document Object Model) representat per un servidor i es reconstrueix immediatament.
Què és la rehidratació parcial?
Una altra forma de rehidratació, la rehidratació parcial, permet la hidratació selectiva dels components JavaScript -o, més concretament, les ‘illes’- sense haver d’hidratar tots els components.
La tècnica combina SSR i RSC.
En aquest escenari, el servidor envia un document HTML inicial juntament amb el contingut representat pel servidor al client. Un cop carregat, el JavaScript del costat del client inicia i manipula el DOM per afegir o actualitzar el contingut existent a les “illes” especificades.
Això vol dir que JavaScript actualitza de manera selectiva parts de la pàgina en lloc de la totalitat.
La rehidratació parcial es considera una tècnica potent per optimitzar el rendiment dels SPA per al rendiment i l’eficiència de càrrega.
Dit això, té els seus problemes, ja que pot presentar reptes per a la memòria cau i la navegació del costat del client.
Una mirada a la representació trisomòrfica
La representació trisomòrfica és menys comuna tant a les comunitats de desenvolupament com a tècniques de SEO.
El procés implica la representació de SPA als costats del servidor i del client, així com en un treballador de serveis per renderitzar HTML per a l’ús de les navegacions.
El procés utilitza una combinació de representació en temps real del costat del servidor, que representa les navegacions inicials, i el treballador del servei representa HTML per a les navegacions. La representació del servidor de streaming garanteix que el contingut necessari s’enviï als motors de cerca.
En el món del desenvolupament, vol dir que els components i les plantilles de la memòria cau es poden mantenir actualitzats i que es poden habilitar les navegacions d’estil SPA per representar noves vistes a la mateixa sessió.
Quan és millor utilitzar la rehidratació?
La rehidratació és una necessitat per als llocs web que han de ser altament interactius, com ara les aplicacions d’una sola pàgina, perquè permet temps de càrrega inicial més ràpids i una millor experiència d’usuari.
Escollir un tipus específic d’hidratació requereix conèixer com funciona la vostra pila de tecnologia i què funciona millor per al vostre lloc web.
També hi ha alternatives a la hidratació, com la recuperabilitat, que difereix segons on s’executa el codi i quan s’executa.
La reactivació pot ser una alternativa a la hidratació i gairebé pot eliminar la necessitat d’executar JavaScript a mesura que s’inicia la pàgina, és a dir, aplicacions gairebé “instantània” en comparació amb un procés d’hidratació.
Quan el client envia una sol·licitud al servidor, el servidor primer reconstrueix l’aplicació i la serialitza en HTML. L’HTML es retorna llavors al client.
Aleshores, el client reprèn l’aplicació des del punt en què el servidor la va serialitzar; aleshores, quan un usuari interactua amb un element de la pàgina, només es sol·licita aquest gestor d’esdeveniments i s’executa sota demanda.
La reprendibilitat i els marcs resumibles no són nous. Google ha utilitzat un marc que es pot reprendre internament anomenat Wiz per a productes de cerca i fotos, i eBay utilitza un marc anomenat Marko que ha afegit la reactivació com a característica.
Més recursos:
Imatge destacada: UnderhilStudio/Shutterstock
