Problemet med fuld hydration

Hydrering er den proces, hvor React tager serversiderenderet HTML og tilknytter JavaScript-hændelseslyttere til den. Serveren sender den oprindelige HTML hurtigt, hvorefter browseren henter JavaScript-bundtet, og React hydreres for at gøre den statiske HTML interaktiv. Indtil hydreringen er færdig, ser siden interaktiv ud, men den er det ikke.

En traditionel enkeltsidesapplikation sender hele JavaScript-bundtet til browseren. React skal hente, fortolke og udføre det og derefter tilknytte hændelseslyttere til hver komponent i træet. I store applikationer kan denne proces tage flere sekunder på mobilenheder i mellemklassen.

Tid til interaktivitet måler, hvor lang tid der går, før brugeren kan interagere med siden. Hydrering blokerer direkte for TTI: Siden kan se klar ud, fordi den serversiderenderede HTML er synlig, men knapper og formularer reagerer ikke, før React er færdig med at tilknytte hændelseslyttere. En høj TTI-værdi giver en dårlig brugeroplevelse.

Overvej en marketingsside: 80 % af indholdet er statisk tekst, billeder og overskrifter, som aldrig ændres. Kun 20 % omfatter interaktive elementer som en nyhedsbrevsformular eller en videoafspiller. Traditionel SPA-hydrering kører stadig for 100 % af siden og behandler dermed statiske komponenter unødvendigt.

Ydeevneprofilering i Chrome DevTools afslører hydreringsomkostningen. I vandfaldsvisningen for hovedtråden kan du identificere opgaven React-hydrering som en lang blok med JavaScript-udførelse efter den første rendering. Jo længere denne blok er, desto mere er hovedtråden optaget, og desto mindre responsiv er siden.

Jo større React-komponenttræet er, desto mere arbejde kræver hydreringen. React skal besøge hver komponent, sammenligne den serversiderenderede HTML med det, komponenten ville gengive, og tilknytte hændelseslyttere. En kompleks side med hundredvis af komponenter kan have mærkbare hydreringsomkostninger, selv på hurtige enheder.

React 18 introducerede samtidig hydrering, som gør det muligt for React at opdele hydreringen i mindre dele og give browseren kontrol mellem dem. Det forhindrer browseren i at virke helt fastlåst under hydrering af store træer. Samtidig hydrering reducerer dog kun effekten — den fjerner ikke den grundlæggende omkostning.

Selektiv hydrering via Suspense gør det muligt for React at hydrere komponenter i prioritetsrækkefølge — brugerinteraktioner udløser øjeblikkelig hydrering af den relevante komponent. Det forbedrer reaktionsevnen, men foregår stadig i ét React-træ: Alle komponenter i træet bliver til sidst hydreret.

Den grundlæggende erkendelse bag Islands-arkitektur er, at det meste af en typisk side slet ikke har brug for JavaScript. Navigationsbjælker, fremhævede sektioner, links i sidefoden, tekst i blogindlæg og produktbeskrivelser er udelukkende præsentationsindhold. At tvinge hydrering igennem på dem er per definition spild.

Undersøgelser fra teams, der arbejder med webydeevne, viser, at tiden til fortolkning og udførelse af JavaScript er den dominerende omkostning på mobilenheder. Et JavaScript-bundt på 300kb tager 2-3 sekunder at fortolke på en typisk Android-telefon. At reducere den mængde JavaScript, der sendes til browseren, giver uforholdsmæssigt store ydelsesfordele sammenlignet med enhver optimering internt i React.

Hver kilobyte JavaScript, du føjer til en React-applikation, medfører mere hydreringsarbejde. Selv hvis en komponent udelukkende er dekorativ, deltager den i hydreringen, hvis den er med i React-træet. Denne hydreringsomkostning vokser med applikationens størrelse og gør det gradvist sværere at bevare gode TTI-målinger, efterhånden som applikationer vokser.

Traditionel React-hydrering behandler hele komponenttræet, også statisk indhold, der ikke har brug for JavaScript. Det blokerer for tid til interaktivitet og skalerer dårligt med applikationens størrelse. React 18's forbedringer af samtidig og selektiv hydrering reducerer effekten, men fjerner ikke den grundlæggende omkostning. Den centrale erkendelse er, at det meste af sidens indhold slet ikke har brug for JavaScript, hvilket gør fuld hydrering spildagtig.