Home/ Questions/Q 457
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

How does React handle hydration in SSR?

  • 0
  • 0

An explanation of hydration in server-side rendering.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. blissy38
    Beginner

    React Hydration in SSR (Server-Side Rendering) 🌐💧

    In Server-Side Rendering (SSR), React pre-renders your app on the server and sends HTML to the client. Hydration is the process where React takes that static HTML and attaches interactivity (event listeners, state, etc.) on the client side.

    Think of SSR like sending a painted house 🏠 to the client, and hydration as adding electricity and plumbing so people can actually live in it! ⚡🚿

    Hydration Flow: 🔄

    1. Server-Side Rendering:
      React renders components into static HTML on the server.

      import { renderToString } from "react-dom/server";

const html = renderToString(<App />);

    2. Sending HTML to the Client:
      The server sends this HTML to the browser, so users see content quickly (great for SEO and initial load).

    3. Hydration on the Client:
      On the client, React hydrates the static HTML, attaching event listeners and reactivating React’s state management.

      import { hydrateRoot } from "react-dom/client";

hydrateRoot(document.getElementById("root"), <App />);

    Why Hydration? 🤔

    • Faster First Paint (FFP): 🏃‍♂️💨
      Users see content faster because the server sends ready-to-go HTML.

    • SEO Benefits: 🔍
      Search engines can crawl the fully rendered HTML.

    • Client-Side Interactivity: 🖱️
      Hydration bridges the gap between static HTML and React’s dynamic behavior.

    Hydration vs. Regular Rendering: ⚔️

    • Regular Rendering:
      React builds the DOM from scratch using ReactDOM.createRoot.

    • Hydration:
      React reuses the existing HTML and adds event listeners without re-rendering the whole UI.

    Common Hydration Issues & Fixes: 🛠️💥

    1. Content Mismatch Errors: ⚠️
      Happens when server-rendered HTML differs from what React renders on the client.

      Fix:

      • Ensure no random values (like dates, random numbers) render differently on server and client.
      • Use useEffect for browser-only code (since it doesn’t run during SSR).

      useEffect(() => {
// Client-only logic
}, []);

    2. Delayed Interactivity: ⏳
      Users might see the page but can’t interact until hydration finishes.

      Fix:

      • Optimize hydration by splitting components with React.lazy and Suspense.
      • Use frameworks like Next.js which handle hydration more efficiently.

    3. Expensive Hydration: 🧮
      Large pages can take time to hydrate.

      Fix:

      • Use Partial Hydration (coming soon in React) or frameworks like Astro that support it.

    Frameworks That Handle Hydration: 🚀

    • Next.js:
      Handles SSR + hydration out of the box.

      import dynamic from "next/dynamic";

      const NoSSRComponent = dynamic(() => import(‘./MyComponent’), { ssr: false });

    • Remix:
      Focuses on SSR with advanced data loading strategies.

    • Gatsby:
      Uses static site generation but also hydrates on the client.

    Quick Example Using SSR & Hydration: ⚡

    Server:

    import express from "express";
import { renderToString } from "react-dom/server";
import App from "./App";

const app = express();

app.get("*", (req, res) => {
const html = renderToString(<App />);
res.send(`
<html>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`);
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

    Client:

    import { hydrateRoot } from "react-dom/client";
import App from "./App";

hydrateRoot(document.getElementById("root"), <App />);