Hydratatie is het moment waarop een webpagina wakker wordt. De server stuurt eerst een afgemaakte HTML-pagina zodat bezoekers meteen inhoud zien. Hydratatie is de vervolgstap waarin de browser het JavaScript van de pagina draait en aan die bestaande HTML koppelt, waardoor een statisch plaatje iets wordt waar je echt op kunt klikken, in kunt typen en mee kunt werken.
Een simpele manier om het te zien is een ingerichte modelwoning met de stroom uit. Je loopt naar binnen en ziet alles op zijn plek, maar de lampen en apparaten doen nog niets. Hydratatie is de hoofdschakelaar omzetten: de kamers stonden er al, en nu komen de schakelaars en stopcontacten tot leven. Dit past natuurlijk bij server-side rendering, dat die kant-en-klare pagina überhaupt maakt.
De keerzijde is de prijs. Hydrateert een framework de hele pagina in één keer, dan moet het veel JavaScript downloaden en draaien, en in dat venster kan de pagina klaar lijken terwijl hij niet reageert. Je ziet dit op zware sites: de tekst staat er gewoon, maar een tik op het menu doet een seconde of twee niets. Daarom bestaan aanpakken als partiële hydratatie, die alleen de interactieve stukken hydrateren en de rest snelle statische HTML laten. Een blogartikel is een mooi voorbeeld: het artikel zelf heeft nooit JavaScript nodig, dus alleen de zoekbalk en het reactieformulier worden gehydrateerd terwijl de tekst gewone HTML blijft. Er gaat minder code over de lijn, de pagina reageert eerder, en een trage telefoon wordt niet langer afgestraft voor een bezoek.
Bij TopDevs houden we hydratatie standaard zo klein mogelijk en sturen we alleen JavaScript waar een pagina echt moet reageren, zodat sites snel blijven en nooit vast aanvoelen.
