Blog / React

What is hydration in React based applications?

What is hydration in React based applications?

In this post find out what hydration in react based applications is, why it is needed, how to use it and react hydration examples.

Will MaygerWill Mayger
October 28, 2021
Article

In 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!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.