Hydration

HydrationHydration is the process of making server-delivered HTML interactive in the browser via JavaScript. The markup already exists; JavaScript only adds the behaviour.Open glossary entry → combines the benefits of server-side renderingJavaScript rendering is the process by which a browser or crawler executes JavaScript code to build the final, visible page. Content that is not already in the delivered HTML only appears after this step.Open glossary entry → or static generation with interactivityInteraction to Next Paint (INP) measures how quickly a page responds to user input across all interactions and represents interactivity.Open glossary entry →. The flow is typically:

• The server delivers finished HTMLHyperText Markup Language (HTML) is the markup language for web pages. It defines the structure and content of a page, such as headings, paragraphs, links and images.Open glossary entry →.
• Crawlers can read the content immediately.
• The browser loads the JavaScript.
• The JavaScript makes the existing page interactive.

This is generally beneficial, because content is available before interactivity. Problems arise with a hydration mismatch, when the server-generated version does not match what the client expects.

Typical causes are different data on server and client, time or random values during render, diverging locale settings, or asynchronous interfaceAn application programming interface (API) is an interface through which software systems communicate and exchange data. It defines how requests are made and answered.Open glossary entry → data. A mismatch can cause content to flicker, disappear, or look different in the browser than in the delivered HTML.