Hydration

Hydration is a strategy to attach JavaScript behavior to HTML elements that has been generated by the server. It's particularly used in JS frameworks to gain performances.

A static web page is loaded by the browser: HTML is ready, interactive elements like buttons don't work yet. Then, JavaScript hydrates the page: it attaches event handlers to HTML elements in the DOM to make it interactive.

Hydration mismatches

Sometimes, the HTML returned by the server don't match what the client expect, making it difficult for the JS to attach the events. It could typically be caused by server-side dynamic content.