Hydration (webbutveckling)
Inom webbutveckling är hydrering eller rehydrering en teknik där JavaScript på klientsidan konverterar en statisk HTML- webbsida, som levereras antingen genom statisk värd eller rendering på serversidan, till en dynamisk webbsida genom att koppla händelsehanterare till HTML-elementen. Eftersom HTML-koden är förrenderad på en server möjliggör detta en snabb "första innehållsfull färg" (när användbar data först visas för användaren), men det finns en tidsperiod efteråt då sidan verkar vara fulladdad och interaktiv, men är inte förrän klientsidans JavaScript körs och händelsehanterare har bifogats.
Ramar som använder hydrering inkluderar Next.js och Nuxt.js . React v16.0 introducerade en "hydrat"-funktion, som hydratiserar ett element, i dess API .
Variationer
Strömmande rendering på serversidan
Strömmande rendering på serversidan gör att man kan skicka HTML i bitar som webbläsaren successivt kan rendera när den tas emot. Detta kan ge en snabb första målning och första innehållsrik målning eftersom HTML-uppmärkning kommer till användarna snabbare.
Progressiv rehydrering
I progressiv rehydrering "startas enskilda delar av en server-renderad applikation upp" över tid, snarare än den nuvarande vanliga metoden att initiera hela applikationen på en gång. Detta kan bidra till att minska mängden JavaScript som krävs för att göra sidor interaktiva, eftersom uppgradering på klientsidan av delar av sidan med låg prioritet kan skjutas upp för att förhindra att huvudtråden blockeras. Det kan också hjälpa till att undvika en av de vanligaste rehydreringsfallgroparna för rendering på serversidan, där ett serverrenderat DOM-träd förstörs och sedan omedelbart återuppbyggs – oftast för att den initiala synkrona renderingen på klientsidan krävde data som inte riktigt var klara, kanske väntar på löfteslösning .
Partiell rehydrering
Partiell rehydrering har visat sig vara svår att genomföra. Detta tillvägagångssätt är en förlängning av idén om progressiv rehydrering, där de individuella delarna (komponenter/vyer/träd) som ska gradvis rehydreras analyseras och de med liten interaktivitet eller ingen reaktivitet identifieras. För var och en av dessa mestadels statiska delar omvandlas sedan motsvarande JavaScript-kod till inerta referenser och dekorativ funktionalitet, vilket reducerar deras fotavtryck på klientsidan till nästan noll. Den partiella hydreringsmetoden kommer med sina egna problem och kompromisser. Det ställer till några intressanta utmaningar för cachelagring och navigering på klientsidan innebär att det inte kan antas att serverrenderad HTML för inerta delar av applikationen kommer att vara tillgänglig utan en hel sidladdning.
Ett ramverk som stöder partiell rehydrering är Elder.js, som är baserat på Svelte .
Trisomorf återgivning
Trisomorf rendering är en teknik som använder streaming server-side rendering för initial/icke-JS navigering, och sedan använder service worker för att ta på sig rendering av HTML för navigering efter att den har installerats. Detta kan hålla cachade komponenter och mallar uppdaterade och möjliggör i SPA -stil för att rendera nya vyer i samma session. Detta tillvägagångssätt fungerar bäst när man kan dela samma mall- och routingkod mellan servern, klientsidan och servicearbetaren.
Delar av denna sida är modifieringar baserade på arbete som skapats och delas av Google och används enligt villkoren som beskrivs i Creative Commons 4.0 Attribution License , specifikt artikeln "Rendering på webben" av Jason Miller och Addy Osmani.