Hydration: What is it?

#webdev #javascript #programming #react

Besides the name, it has nothing to do with water. But still, hydrate yourself. Hydration is simply the process of attaching JavaScript behavior to HTML elements that have been generated on the server, it is necessary to make a web page interactive, allowing users to click buttons, fill out forms, and perform other actions. Without hydration, web pages would be static and unresponsive.

In SSR (Server-side Rendering), the HTML and JavaScript are generated on the server and sent to the client as a fully-formed document. However, this HTML is still just a static representation of the page. Hydration is still necessary to attach event listeners to the page and make it interactive and dynamic. Once the HTML and JavaScript bundles have been downloaded by the browser, the JavaScript takes over and attaches event listeners to the HTML, allowing for a fully interactive user experience.

Hydration isn't needed in client-side rendering (CSR) because the entire JavaScript bundle is loaded and executed on the client, which includes all the necessary event listeners and JavaScript behavior. This means that the JavaScript code can directly manipulate the HTML elements that it created, without the need for hydration. Unlike server-side rendering (SSR), where HTML is generated on the server and sent to the client as a fully-formed document.

Conclusion

Hydration is a key concept in web development, allowing for dynamic and interactive user experiences on the server. By understanding how hydration works in SSR, developers can build web applications that are fast, responsive, and accessible to a wide range of users.

Top comments (5)

Aloof • Mar 25 • Edited

Kinda confused with the main argument of the three paragraphs. First it is said that hydration is necessary for interactivity and then the own article says the contrary. Here my rationale:

First paragraph conclusion: "Hydration is simply the process of attaching JavaScript behavior to HTML elements that have been generated on the server, it is necessary to make a web page interactive [...] without hydration, web pages would be static and unresponsive."

Second paragraph's conclusion: "In SSR (Server-side Rendering), the HTML and JavaScript are generated on the server and sent to the client as a fully-formed document [..] once the HTML and JavaScript bundles have been downloaded by the browser, the JavaScript takes over and attaches event listeners to the HTML"

Third paragraph's conclusion: " Hydration isn't needed in client-side rendering (CSR) because the entire JavaScript bundle is loaded and executed on the client [...] this means that the JavaScript code can directly manipulate the HTML elements that it created, without the need for hydration."

Given the second and third paragraphs' conclusion, hydration seems to have more with generating HTML and JS than just HTML, taking in consideration "In SSR (Server-side Rendering), the HTML and JavaScript are generated on the server". Nevertheless the third paragraph's conclusion, implicitly says that adding event listeners to the HTML does not need hydration, in that case that would contradict the first paragraph's conclusion as it would add interactivity to the page without hydration.

For instance:

const form = document.getElementById("login-form");

form.addEventListener("submit", login);

The later would be, given the last three conclusions: hydration. Because it uses an HTML element that has not been generated by JS and is adding event listeners. This leads me to wonder, is hydration the process of the browser running JS? If yes, creating any piece of JS that interacts with HTML elements would be hydration. If not then hydration is not needed to create interactivity like it is stated in the first conclusion.