Will MaygerIn React you might have heard of the concept of react hydration, chances are if you are aware of it then it is because you need to essentially have a server side react application.
In this post we are going to cover what react hydration is, why is it needed, and a few react hydration examples of the differences between react hydration and react render.
What is react hydration?
React hydration is a technique used that is similar to rendering, but instead of having an empty DOM to render all of your react components into, you have a DOM that has already been built with all your components rendered as HTML.
The hydration step will take this pre-built HTML, compare it to your component tree, and then refresh it with the live react components which will add on all the event listeners and JavaScript that you need to make your application fully functional.
So, simply put, react hydration is similar to react render, but for applications that have already been pre-built on the server side.
Why is react hydration needed?
Now we have an understanding of the concept behind react hydration, why is it needed?
React hydration is mainly needed if you need to build your HTML server side before the client gets to it, so instead of having a DOM with just an empty root element, you have a fully built application with all the elements, copy and components saved as HTML.
Once you have this pre-built HTML application, the hydration step will then compare and apply your React code into it to create a functional react application with all the event listeners and other interactive features that you need JavaScript to do.
In other words, instead of serving the client an empty HTML document, you serve the client a complete HTML document with all your data, copy and elements that should be in there.
This is mainly useful for SEO, speeding up the initial load time of pages and any server side rendered application that needs the HTML before serving it to the client.
A good example of a popular technology that relies on hydration is GatsbyJS.
React Hydration Example
For the purposes of illustration, here is an example of an empty application that does not need to use hydration:
Basic react application:
const root = document.querySelector("#root");
ReactDOM.render(<h1>Hello World</h1>, root);The static html for the basic application:
<html>
<head></head>
<body>
<div id="root"></div>
</body>
</html>The output of the application before loading scripts on client side:
<html>
<head></head>
<body>
<div id="root"></div>
</body>
</html>The output of the application after loading scripts on client side:
<html>
<head></head>
<body>
<div id="root">
<h1>Hello World</h1>
</div>
</body>
</html>And here is the exact equivalent but this time using a pre-built application that uses hydration:
const root = document.querySelector("#root");
ReactDOM.hydrate(<h1>Hello World</h1>, root);The static html for the basic application:
<html>
<head></head>
<body>
<div id="root">
<h1>Hello World</h1>
</div>
</body>
</html>The output of the application before loading scripts on client side:
<html>
<head></head>
<body>
<div id="root">
<h1>Hello World</h1>
</div>
</body>
</html>The output of the application after loading scripts on client side:
<html>
<head></head>
<body>
<div id="root">
<h1>Hello World</h1>
</div>
</body>
</html>React hydration vs React render
React render (ReactDOM.render) can be used to render an application on an empty route from scratch, whereas React hydrate (ReactDOM.hydrate) can be used on a pre-built HTML template to “hydrate” the application which means to add back in any functionality your JavaScript added to your elements such as event listeners, and so on.
Summary
There we have react hydration in React based applications, if you want more like this be sure to check out some of my other posts!
