Definitie
Hydration is de stap waarin JavaScript server-gerenderde HTML in de browser interactief maakt door er event handlers en state aan te koppelen.
Wat is hydration?
Hydration is het proces waarbij een JavaScript-framework zoals React of Vue de HTML die de server al stuurde, in de browser 'overneemt'. Het framework draait de componenten opnieuw, vergelijkt het resultaat met de bestaande HTML en koppelt event handlers en state. Pas daarna reageren knoppen, filters en formulieren.
Je komt het tegen bij server-side rendering met een JavaScript-framework: Next.js, Nuxt, Remix en Shopify Hydrogen werken zo. Het idee is het beste van twee werelden: snelle, crawlbare HTML én een interactieve app.
Je kunt het zien als twee keer hetzelfde werk. De server rendert de pagina naar HTML, en de browser rendert de componenten nog een keer om te weten welk stuk HTML bij welk component hoort. Het tweede deel is de prijs die je betaalt voor de interactiviteit van een volledig JavaScript-framework.
Waarom het ertoe doet voor webshops
Voor SEO is hydration meestal geen probleem. De content staat al in de server-HTML, dus Googlebot ziet hem. Het probleem zit in snelheid.
De browser moet de hele JavaScript-bundel downloaden, parsen en uitvoeren voordat de pagina werkt. Op een gemiddelde telefoon kan dat seconden duren. In die tijd ziet de 'In winkelwagen'-knop er klaar uit, maar reageert niet. Dat zie je terug in INP en in bezoekers die drie keer tikken.
Een tweede valkuil is een hydration mismatch: de HTML van de server verschilt van wat de browser rendert. Bij webshops gebeurt dat met prijzen per klantgroep, voorraad, tijdzones of gepersonaliseerde blokken. Het framework gooit dan delen weg en rendert opnieuw. Dat kost tijd en kan layout shifts veroorzaken.
Alternatieven en hoe Hyvä het doet
Nieuwere technieken beperken de kosten: partial hydration of islands (alleen interactieve onderdelen krijgen JavaScript), progressive hydration (onderdelen pas hydrateren als ze in beeld komen) en React Server Components (componenten die nooit naar de browser gaan).
Hyvä en klassieke Shopify-thema's werken anders. De server levert complete HTML en een kleine library (Alpine.js in Hyvä, vaak web components in Shopify-thema's) koppelt gedrag aan bestaande elementen. Er wordt geen app opnieuw opgebouwd. Dat is een belangrijke reden waarom Hyvä-shops op INP goed scoren en waarom wij voor Magento op Hyvä bouwen.
Veelgemaakte fouten
Elke pagina als één grote client-component bouwen, zodat ook statische tekst en footer gehydrateerd worden. Personalisatie in de server-HTML zetten die in de browser anders uitvalt. En pas na livegang meten, terwijl je met RUM per template ziet hoe lang het duurt voordat een pagina echt bruikbaar is.
Ook veel voorkomend: scripts van derden die vóór de hydration in de DOM schrijven. Een chatwidget of A/B-test die HTML aanpast voordat React klaar is, kan een mismatch veroorzaken die alleen in productie optreedt.
Hydration in React
import { hydrateRoot } from 'react-dom/client';
import ProductPage from './ProductPage';
// De HTML staat er al; React koppelt alleen gedrag
hydrateRoot(
document.getElementById('root'),
<ProductPage product={window.__PRODUCT__} />
);Verder lezen
Veelgestelde vragen
Ziet Google content die pas na hydration verschijnt?+
Meestal wel, omdat Google rendert. Maar content die alleen na hydration verschijnt is eigenlijk client-side rendering, met dezelfde risico's.
Heeft een Hyvä-shop hydration?+
Niet in de zin van React of Vue. Alpine.js koppelt gedrag aan de bestaande server-HTML zonder de pagina opnieuw te renderen.