Why does my Next.js app show a hydration error when using dynamic data?

[SachinSingh201]

Summary

Why does my Next.js app show a hydration error when using dynamic data?

I'm building a Next.js application and I'm getting a hydration error when I fetch data from an API inside useEffect.

The simplified version looks like this:

"use client";

import { useEffect, useState } from "react";

export default function Home() {
  const [data, setData] = useState("");

  useEffect(() => {
    fetch("/api/message")
      .then((res) => res.json())
      .then((json) => setData(json.message));
  }, []);

  return <h1>{data}</h1>;
}

### Additional information

_No response_

### Example

_No response_

[vedant476]

The important distinction here is between a hydration mismatch and a state update that happens after hydration.

With the simplified example, useEffect itself should not cause a hydration mismatch.

Initially, both the server and client render:

<h1></h1>

After hydration, useEffect runs in the browser, fetches the data, and calls setData():

useEffect()
    ↓
fetch()
    ↓
setData(...)
    ↓
<h1>Hello</h1>

This is a normal client-side update because it happens after hydration.

A hydration error usually happens when the server's HTML differs from the client's initial render.

Common causes are things like:

Date.now()
Math.random()
new Date().toLocaleString()

or browser-only APIs used during rendering:

window.innerWidth
localStorage.getItem("theme")
document...

Another common mistake is:

const isBrowser = typeof window !== "undefined";

return isBrowser ? <ClientUI /> : <ServerUI />;

This can make the server and client render different HTML.

So the simple rule is:

Hydration mismatch = server HTML and client's initial render are different.

State update from useEffect after hydration = normal React update.

Therefore, if the simplified useState + useEffect example is the complete code, useEffect itself should not be the cause of the hydration error.

[gitsult4n]

fetch in useEffect doesn't cause hydration error itself — effects run after hydration completes. The real cause is usually something rendering differently between server and client before that: Date.now(), Math.random(), locale-dependent formatting, or a typeof window !== 'undefined' check inside render. Browser extensions injecting DOM before React hydrates can also trigger this. Check the exact hydration warning text — it names which node mismatched.