What is hydration?

Introduction

Before delving into the concept of hydration, let's take a cursory look at server-side rendering (SSR) and client-Side Rendering (CSR).

The key difference between SSR and traditional client-side rendering (CSR) is that SSR provides a fully rendered page directly from the server for the initial load, while CSR loads a minimal HTML page and relies on client-side JavaScript to render and update the content dynamically.

Server-Side Rendering (Dynamic Rendering):

  • The server processes the request and generates fully rendered HTML pages with data.
  • The complete HTML content is sent to the client's browser, including the rendered data and dynamic content.
  • The client receives a ready-to-render page, reducing the need for additional client-side rendering.
  • This approach improves initial page load time and enables search engines to easily crawl and index the content.

The primary benefit of SSR is that it allows the server to render the initial HTML content of the page with the required data, which is then sent to the client's browser. This initial HTML content is often fully or partially populated with data from the server, making the page functional and interactive without requiring a full page reload.

In a Next.js app using getServerSideProps for server-side rendering, the page will not be blank during the data fetching process. The getServerSideProps function executes on the server-side before sending the page to the client's browser. As a result, the data fetching happens on the server before the fully rendered page is sent to the user's device.

Here's how the process works:

  1. User Requests the Page: When a user requests a page that uses getServerSideProps, the server-side rendering process starts.

  2. Data Fetching: Inside the getServerSideProps function, you can fetch data from APIs, databases, or other sources that provide the necessary data for the page. While the data fetching is happening, the server waits for the data to be retrieved.

  3. Server-Side Rendering: Once the data is fetched, the getServerSideProps function returns the data as props, and the server renders the page with the fetched data. The server then sends the fully rendered HTML page, including the data, to the client's browser.

  4. Page Display: The user's browser receives the fully rendered page with the data. As a result, the page is displayed with the available content.

Since the server-side rendering process completes before the page is sent to the client, the page will not be blank during the data fetching phase. Users will see the page content with the data as soon as it's available, providing a more seamless and smooth user experience compared to client-side rendering (CSR), where the page may initially load without the data, resulting in a blank or partially rendered page until the data is fetched and rendered on the client-side.

Client-Side Rendering (CSR):

  • The server sends a minimal HTML file with JavaScript and CSS links to the client's browser.
  • The client-side JavaScript is responsible for fetching data from APIs and rendering the content on the client's browser.
  • The page content is dynamically generated on the client-side after the initial page load.
  • This approach can provide more interactive and responsive user experiences but may result in a slower initial page load and potential SEO challenges.

What is hydration in React?

In the context of React, "hydration" refers to the process of attaching a React application to an existing HTML markup generated on the server-side. It is also known as "server-side rendering (SSR) reconciliation" or "initial rendering."

When you build a React application that is meant to run on the client-side only, the initial rendering occurs in the browser. React takes control of the DOM and renders the components, updating the UI as necessary.

However, with server-side rendering, the initial HTML content is generated on the server and sent to the client's browser. This is beneficial for several reasons, including search engine optimization (SEO) and improved initial page load times.

The hydration process in React happens when the client-side JavaScript takes over the already rendered HTML and "hydrates" it, meaning it attaches event handlers, sets up data, and makes the necessary connections to turn the static HTML into an interactive React application. This way, the application on the client-side can take over seamlessly and continue as a single-page application (SPA) with all the interactivity and state management that React provides.

To enable hydration in a React application, you typically use the ReactDOM.hydrate method, which is similar to ReactDOM.render but specifically designed for this purpose. It takes the server-rendered HTML and attaches the React event handlers and behaviors to it, allowing the app to pick up where it left off on the server.

In summary, hydration ensures a smooth transition from server-rendered content to a fully interactive client-side React application, providing better performance and user experience.