Hydration Process in Terms of React, HTML, CSS, and JavaScript
Hydration in React refers to the process of taking a pre-rendered HTML structure (usually from Server-Side Rendering or Static Generation) and making it interactive by attaching event listeners and state from React.
Here’s how hydration fits into the overall rendering lifecycle involving HTML, CSS, and JavaScript:
- HTML Parsing & CSSOM Creation
- The browser receives an HTML file from the server.
- It starts **parsing the HTML** and builds the **DOM (Document Object Model)**.
- Simultaneously, it downloads and processes CSS, forming the **CSSOM (CSS Object Model)**.
- The **DOM and CSSOM** combine to create the **Render Tree**, which is used for painting pixels on the screen.
- JavaScript Execution & React Hydration
- The JavaScript bundle (which includes React) is downloaded, parsed, and executed.
- React **reconstructs the virtual DOM** and reconciles it with the existing server-rendered HTML.
- It attaches event listeners and hooks to the pre-rendered elements, making them interactive.
- Selective Hydration (React 18+)
- Instead of blocking the entire page until hydration completes, **React prioritizes critical UI sections** for faster interactivity.
- Components can hydrate separately based on user interactions or priority.
Hydration vs. Initial Client-Side Rendering (CSR)
- Without Hydration (CSR-only apps): The browser gets a blank HTML file and JavaScript creates the entire DOM from scratch.
- With Hydration (SSR + React): The browser receives a fully rendered HTML but needs JavaScript to enable interactivity.
Key Takeaways
✅ Hydration is the process where JavaScript "revives" the pre-rendered HTML by attaching React functionality.
✅ The DOM (HTML) and CSSOM (CSS) are created first before React executes.
✅ Selective Hydration speeds up loading by hydrating critical sections first.
Server sends fully rendered HTML to the client's browser,
detailed explanation:
server.get('*', (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>`);
});
Server-Side Rendering (SSR)
- Server-Side Rendering Process:
- The server generates the HTML for the requested page.
- This HTML includes all the necessary markup to display the content.
- The server sends this fully rendered HTML to the client's browser.
- Browser Processing: (Critical Rendering Path*)*
- The browser receives the HTML and parses it to create the DOM.
- The browser also parses any CSS to create the CSSOM.
- The browser combines the DOM and CSSOM to render the page visually.
- The browser then downloads and executes the JavaScript bundle.
- React hydrates the HTML, attaching event listeners and making the page interactive.
Client-Side Rendering (CSR)
- Client-Side Rendering Process:
- The server sends a minimal HTML document to the client's browser.
- This HTML typically includes a
<div id="root"></div>where the React application will be mounted. - The browser downloads the JavaScript bundle.
- The JavaScript executes and React renders the components into the DOM.
- The browser creates the DOM and CSSOM from the rendered components.
Key Differences
-
Initial Load:
- SSR: The browser receives a fully rendered HTML, so the content is displayed immediately. The DOM and CSSOM are created from this HTML and CSS.
- CSR: The browser receives a minimal HTML and needs to download and execute JavaScript to render the content. The DOM and CSSOM are created after the JavaScript executes.
-
Performance:
- SSR: Faster initial load because the content is already rendered. The user sees the content sooner.
- CSR: Slower initial load because the browser needs to execute JavaScript to render the content.
-
Interactivity:
- SSR: The page becomes interactive after hydration, which attaches event listeners to the existing HTML.
- CSR: The page becomes interactive as soon as the JavaScript renders the components.
Server Actions (Server Functions)
Server Actions refer to operations performed on the server to prepare data or perform computations before sending the HTML to the client. These actions are crucial in Server-Side Rendering (SSR) as they ensure that the necessary data is available for rendering the components on the server.
Example of Server Actions:
- Data Fetching:
- Fetching data from a database or an API.
- Example: Fetching user details or product information.
- Data Processing:
- Performing computations or transformations on the data.
- Example: Calculating totals, filtering data, or formatting dates.
- Authentication:
- Verifying user credentials and permissions.
- Example: Checking if a user is logged in and authorized to view a page.
Selective Hydration
Selective Hydration is a technique where only parts of the page are hydrated as needed, rather than hydrating the entire page at once. This can improve performance by reducing the amount of JavaScript that needs to be executed initially.
How Selective Hydration Works (When we Use Suspense and Lazy Loading):
- Initial Render:
- The server sends fully rendered HTML to the client.
- The client displays the HTML immediately.
- Hydration:
- Instead of hydrating the entire page, only specific parts of the page are hydrated based on user interactions or visibility.
- Example: Hydrating a form when it becomes visible or when a user interacts with it.
- Benefits:
- Reduces the initial JavaScript execution time.
- Improves performance and user experience by making the page interactive faster.
Bundle Splitting with Suspense and Lazy Loading
When you use Suspense and lazy, your JavaScript bundle is split into smaller chunks. Each chunk contains only the code necessary for a specific part of your application. This reduces the initial load time because the browser only needs to download the code required for the initial render.
How Bundle Splitting Works:
- Initial Load:
- The initial bundle contains the code for the main application and any components that are immediately needed.
- Lazy-loaded components are not included in the initial bundle.
- On-Demand Loading:
- When a lazy-loaded component is needed (e.g., when it becomes visible or is interacted with), the browser fetches the corresponding chunk.
- `Suspense` displays a fallback (e.g., a loading spinner) while the chunk is being loaded.
- Improved Performance:
- Reduces the initial bundle size, leading to faster initial load times.
- Only loads the code that is necessary at any given time, reducing overall bandwidth usage.
Top comments (0)