Kokonaisen hydraation ongelma

Hydraus on prosessi, jossa React ottaa palvelimella renderöidyn HTML:n ja liittää siihen JavaScript-tapahtumankuuntelijat. Palvelin lähettää alustavan HTML:n nopeasti, minkä jälkeen selain lataa JavaScript-paketin ja React ”hydraa” staattisen HTML:n vuorovaikutteiseksi. Ennen hydrauksen valmistumista sivu näyttää vuorovaikutteiselta, mutta ei todellisuudessa ole sitä.

Perinteinen single-page application lähettää koko JavaScript-paketin selaimeen. Reactin on ladattava, jäsennettävä ja suoritettava se sekä liitettävä tapahtumankuuntelijat jokaiseen puun komponenttiin. Suurissa sovelluksissa tämä prosessi voi kestää keskitason mobiililaitteilla useita sekunteja.

Interaktiivisuuteen kuluva aika mittaa, kuinka kauan kestää, ennen kuin käyttäjä voi olla vuorovaikutuksessa sivun kanssa. Hydraus estää suoraan TTI:n saavuttamisen: sivu saattaa näyttää valmiilta, koska palvelimella renderöity HTML on näkyvissä, mutta painikkeet ja lomakkeet eivät reagoi, ennen kuin React on liittänyt tapahtumankuuntelijat. Suuri TTI-arvo merkitsee huonoa käyttökokemusta.

Ajatellaan markkinointisivua: 80 % sisällöstä on staattista tekstiä, kuvia ja otsikoita, jotka eivät koskaan muutu. Vain 20 % sisältää vuorovaikutteisia komponentteja, kuten uutiskirjelomakkeen tai videosoittimen. Perinteinen SPA-hydraus suoritetaan silti koko sivulle, joten staattisia komponentteja käsitellään tarpeettomasti.

Chrome DevToolsin suorituskykyprofilointi paljastaa hydrauskustannukset. Pääsäikeen vesiputouskaaviossa ”React-hydraus”-tehtävä näkyy pitkänä JavaScriptin suorituslohkoina ensimmäisen piirron jälkeen. Mitä pidempi tämä lohko on, sitä enemmän pääsäie on varattu ja sitä heikommin sivu reagoi.

Mitä suurempi React-komponenttipuu on, sitä enemmän työtä hydraus vaatii. Reactin on käytävä läpi jokainen komponentti, verrattava palvelimella renderöityä HTML:ää siihen, mitä komponentti renderöisi, ja liitettävä tapahtumankuuntelijat. Satoja komponentteja sisältävällä monimutkaisella sivulla hydrauksen aiheuttama kuormitus voi olla mitattavissa jopa nopeilla laitteilla.

React 18 toi käyttöön samanaikaisen hydrauksen, jonka ansiosta React voi jakaa hydrauksen pienempiin osiin ja luovuttaa suoritusvuoron selaimelle niiden välillä. Tämä estää selainta vaikuttamasta täysin jähmettyneeltä suurten puiden hydrauksen aikana. Samanaikainen hydraus kuitenkin vain vähentää vaikutusta — se ei poista perustavanlaatuista kustannusta.

Valikoiva hydraus (Suspense-kautta) antaa Reactin hydrata komponentteja tärkeysjärjestyksessä — käyttäjän vuorovaikutus käynnistää asiaankuuluvan komponentin välittömän hydrauksen. Tämä parantaa reagointikykyä, mutta toimii edelleen yhden React-puun sisällä: kaikki puun komponentit hydrataan lopulta.

Islands Architecture -arkkitehtuurin keskeinen oivallus on, että useimmat tyypillisen sivun osat eivät yksinkertaisesti tarvitse lainkaan JavaScriptiä. Navigointipalkit, hero-osiot, alatunnisteen linkit, blogikirjoituksen teksti ja tuotekuvaukset ovat pelkästään esityksellisiä. Niiden hydraaminen on määritelmän mukaan tuhlausta.

Verkon suorituskykytiimien tutkimukset osoittavat, että JavaScriptin jäsentämiseen ja suorittamiseen kuluva aika on mobiililaitteiden suurin kustannustekijä. 300 kilotavun JavaScript-paketin jäsentäminen kestää mediaani-Android-puhelimella 2–3 sekuntia. Selaimeen lähetettävän JavaScriptin vähentäminen parantaa suorituskykyä huomattavasti enemmän kuin Reactin sisäiset optimoinnit.

Jokainen React-sovellukseen lisätty JavaScript-kilotavu lisää hydraustyötä. Vaikka komponentti olisi pelkästään koristeellinen, se osallistuu hydraukseen, jos se kuuluu React-puuhun. Tämä ”hydrausvero” kasvaa sovelluksen koon mukana, ja sovellusten kasvaessa hyvien TTI-arvojen ylläpitäminen käy jatkuvasti vaikeammaksi.

Perinteinen React-hydraus käsittelee koko komponenttipuun, myös staattisen sisällön, joka ei tarvitse JavaScriptiä. Tämä estää interaktiivisuuteen kuluvan ajan saavuttamisen nopeasti ja skaalautuu huonosti sovelluksen koon kasvaessa. React 18:n samanaikaisen ja valikoivan hydrauksen parannukset vähentävät vaikutusta, mutta eivät poista perustavanlaatuista kustannusta. Keskeinen oivallus on, että suurin osa sivun sisällöstä ei yksinkertaisesti tarvitse JavaScriptiä, joten koko sivun hydraus on tuhlausta.