When I started my role at Trinsic in 2023, I decided to distance myself a bit from the often chaotic trends of front-end development, especially in the React ecosystem. Trinsic’s product doesn’t really require the latest and greatest front-end tech—SPAs are sufficient for us.
Lately, I’ve been trying to catch up on what I missed over the past few months, and it seems like the term “hydration” is being thrown around frequently. It’s supposed to mean something, and from the way it’s used, it seems to be a common term in the industry. But I can’t help feeling this way every time I hear or read it:
I decided to look up what it means so I don’t look foolish when people throw the term around. Hopefully, this will help you too.
What is hydration?
If you search for “hydration” in a search engine, you’ll get something like this:
Hydration is the replacement of body fluids lost through sweating, exhaling, and eliminating waste.
— Texas Health and Human Services
I know, that’s not what you’re looking for, but I think it’s funny. Anyway, if you add more context like “front-end hydration,” you’ll quickly find that hydration refers to the process of transforming static or stale content into interactive content. The Next.js documentation explains it elegantly and simply:
Hydration is the process of attaching event listeners to the DOM to make the static HTML interactive.
Hydration as a technique isn’t new, but it has been popularized by React and its server-side rendering (SSR) capabilities. When you render a React application on the server, you get a static HTML page that is sent to the client. Once the client receives this HTML, React “hydrates” it into a fully interactive application by attaching event listeners to the DOM.
Hydration steps
- The server sends a rendered static page to the client (via SSG or SSR).
- The client displays the static page as a non-interactive view.
- The JavaScript bundle loads on the client.
- The bundle attaches event listeners to the DOM and “hydrates” it.
- The page becomes interactive with client-side JavaScript.
In contrast, in a traditional SPA, the server sends an empty HTML page along with a JavaScript bundle that renders the page entirely on the client. This is why SPAs are often slower to load compared to server-rendered applications.
Example
This very page is an example of hydration. When you load this page, you initially receive a static HTML page containing the content of this note. However, you won’t be able to interact with features like comments or reactions until the JavaScript bundle loads. Once it does, the bundle attaches event listeners to the DOM, enabling the comment section and reaction functionality.
You can test this by disabling JavaScript in your browser and reloading the page. You’ll see an empty page. If you inspect the page source, you’ll find the content of this note in the HTML, but it won’t be displayed or interactive. (In retrospect, I should probably change this behavior so the content is displayed even if JavaScript is disabled.)
Conclusion
Hydration is a technique that allows you to send static HTML to the client and make it interactive by attaching event listeners to the DOM. It’s a popular approach in React applications and one of the reasons server-side rendering is a powerful tool in the front-end developer’s toolbox.
So, do I look like I know what “hydration” means?
