Begrip: Hydration & Server Side Rendering

Een applicatie die gebruikt maakt van Server Side Rendering (SSR) stuurt een React component naar de client als HTML.

Zodra de client (browser) de HTML gerenderd heeft, doorloopt de pagina het hydration process. Dit process zorgt ervoor dat React gekoppeld wordt aan de DOM-elementen die de server gestuurd heeft. React neemt hierbij dus de controle van de DOM-elementen over en koppelt eventuele event handlers.

Het is belangrijk dat de data die door de server gestuurd wordt overeenkomt komt met de data die op de client gerenderd wordt tijdens het hydration process. Als dat niet zo is, kan dit leiden tot hydration errors. Foutieve geneste tags zoals p > button en bepaalde functies zoals Date.toLocaleString() zijn enkele voorbeelden van zaken die zulke errors kunnen veroorzaken.

In de meeste gevallen is het eenvoudig om hydration errors op te lossen, maar in sommige gevallen is het moeilijk of zelfs onmogelijk. De Date.toLocaleString() functie is een voorbeeld van een onvermijdelijke hydration error omdat deze functie afhankelijk is van de taalinstellingen van de server (waar de initiële HTML-code gegenereerd wordt) en de client (waar de functie opnieuw opgeroepen wordt tijdens het hydration process). Omdat de taalinstellingen waarschijnlijk verschillen tussen server en client, is de datum anders geformatteerd en wordt er een foutmelding gegenereerd.

In dit geval kan de booleaanse suppressHydrationWarning property toegevoegd worden aan de directe parent van het HTML-tag waarin de fout zich voordoet. Zo wordt de foutmelding verborgen. Dit is natuurlijk een escape hatch die je best zo weinig mogelijk gebruikt.