Before surfing into the concept of hydration in React, it’s essential to grasp some fundamental concepts: client-side rendering (CSR) and server-side rendering (SSR).
Client-side rendering (CSR)
Client-side rendering involves rendering all pages directly in the browser using JavaScript. In this approach, the browser handles all data-fetching tasks, leading to slower page loading times and potentially a subpar user experience. ReactJS serves as a prime example of a client-side rendering library.
Server-side rendering (SSR)
Server-side rendering, on the other hand, utilizes servers’ request-response processes to render pages using JavaScript. Data fetching is performed by the servers, resulting in a better user experience. SSR loads HTML content initially, providing users with some content, while JavaScript loads in the background. Unlike CSR, SSR doesn’t present a blank page during the initial render. This initial rendering disparity becomes apparent when dealing with larger applications with frequent state changes.
Understanding Hydration in React
Many developers encounter confusion surrounding the term “hydration” in React. But what exactly is hydration? When a server sends HTML to the browser, it’s rendered on the client side. However, this HTML lacks React components. Hydration is the process by which React attaches itself to this existing HTML. It attempts to attach event listeners to the HTML, enabling control over all DOM nodes within it. Essentially, hydration allows React to integrate seamlessly with pre-rendered HTML, enhancing interactivity and functionality.
With the latest version of React (v18), developers can now render components on the server side. This means that the HTML generated by the server and sent to the client also originates from React. The HydrateRoot function facilitates the display of React components within a DOM node whose HTML content was previously generated by react-dom/server`.
Understanding React hydration is crucial for optimizing client-side rendering and improving user experiences. By seamlessly integrating React with server-rendered HTML, developers can achieve faster initial renders and better overall performance in their web applications.
Rendering and hydration are both crucial processes in React, but they serve different purposes and are used in different contexts.
Rendering
Rendering in React refers to the process of converting React components into DOM elements and displaying them on the screen. When you use ReactDOM.render() in your code, you’re instructing React to render your component hierarchy into a specified DOM node.
For example,
React renders the <App /> component with the specified props (name="Jitendra") into the DOM node with the id root. This results in the component being displayed on the webpage as “If you find my blog helpful consider dropping an emoji”.
Hydration
Hydration, on the other hand, is the process of attaching event listeners and reattaching event handlers to the server-rendered HTML. It’s a crucial step when React is used for server-side rendering (SSR), as it allows React to take over the client-side interactivity of a page that was initially rendered on the server.
For example,
You’re attempting to hydrate the server-rendered HTML with React. However, since the server-rendered HTML doesn’t contain the expected <h1> element, React throws a warning because it expects the server HTML to match the client HTML.
hydrateRoot() API
The hydrateRoot() API is a more recent addition to React, introduced in React 18. It replaces the deprecated hydrate() method. This API allows you to hydrate a root React node with server-rendered HTML content.
-
domNode: The DOM element that was rendered as the root element in the tree. -
reactNode: The React node used to render the existing HTML, typically a JSX file likeApp.js. -
Options: An optional object with options for the React root.
Some key points to remember:
hydrateRoot() compares the rendered content and the server-rendered content and warns you of any mismatches during hydration.
If the HTML content is not rendered beforehand, you can’t use hydrateRoot(). In this case, createRoot() has to be used.
It’s typically best to have only one hydrateRoot() call in your entire React app.
Conclusion
Looking forward to React 19, there’s a sense of anticipation for what’s next.
If you have read this far and find my blogs worth reading feel free to follow me here so you can get my next blog update straight in your feed.
Interested in connecting on X, LinkedIn, GitHub?