Hydrering (hydration)

Varför steget finns

Förrenderad eller serverrenderad HTML ser färdig ut men är död: knappar gör ingenting, menyer öppnas inte, formulärvalidering saknas. Ramverket måste bygga upp sitt komponentträd i webbläsaren och koppla det till de DOM-noder som redan finns. Den kopplingen är hydreringen.

Det skapar ett fönster som är lätt att missa i utvecklingsmiljön och uppenbart på en mellanklassmobil: sidan syns men går inte att använda. Texten är läsbar, layouten är rätt, och tryck ignoreras eller köas tills paketet har laddats ner, tolkats och körts. Ju större paket, desto längre fönster – och det syns direkt i Interaction to Next Paint.

Hydreringsmissmatch

Om HTML:en webbläsaren fick inte stämmer med det ramverket renderar på klienten uppstår en missmatch. React loggar en varning och renderar i nyare versioner om den berörda delen av trädet, och det synliga symptomet är innehåll som blinkar till eller hoppar en stund efter laddningen.

Orsakerna är förutsägbara när man känner till dem:

• new Date(), Math.random() eller annat som skiljer sig mellan bygge och körning.
• Att läsa window, localStorage eller webbläsarsträngen under första renderingen.
• Innehåll som beror på språk eller tidszon och tolkas olika på servern och i webbläsaren.

Lösningen är att rendera samma neutrala utdata på båda sidor och flytta den webbläsarspecifika delen till en effekt som körs efter hydreringen.

Sätt att komma runt kostnaden

Ramverken har lagt år på att minska den. Delvis hydrering, eller öarkitektur som i Astro, hydrerar bara de komponenter som verkligen behöver vara interaktiva och lämnar resten som vanlig HTML. Progressiv hydrering skjuter upp komponenter tills de scrollas in i vyn. Serverkomponenter i React flyttar tillbaka arbete till servern så att mindre kod skickas över huvud taget.

Missuppfattningen värd att sätta ord på: hydrering är inte det som får sidan att synas. Sidan syns tack vare HTML:en, hydreringen gör den bara svarande. En webbplats som ritas direkt men reagerar trögt har en hydreringskostnad, inte ett renderingsproblem.