ReactJS Client-Side Hydration

What is it and how does it help to speed up your application?

ReactJS is known for making creating interactive, stateful UIs easy. React is also known for increasing your time to first load, and for creating interfaces that are not easily understood by search engine crawlers.

Both are very bad things and might not be suitable for a production application 😆

The reason for both of the above issues with React is that React applications generally return ONLY the following HTML to the browser initially:

<div id=”root”></div>

…and then they kick off the react rendering process which generates all of the rest of your page on the clients browser. Depending on the size and speed of your application, a search engine that opens up your page might only see that single div on your page, and thus miss out on much of the content. Below is an example of the steps involved when a browser runs a classic react application.

One solution to this problem is what is called ‘React Hydration’ or ‘client-side hydration’. In this model you can write your React interface once, run it…