# How do you stop SSR hydration from flashing the wrong user state at the edge?

**URL:** <https://forum.kirupa.com/t/how-do-you-stop-ssr-hydration-from-flashing-the-wrong-user-state-at-the-edge/681872>\
**Category:** web dev\
**Created:** [June 2, 2026, 7:00am UTC](https://forum.kirupa.com/t/how-do-you-stop-ssr-hydration-from-flashing-the-wrong-user-state-at-the-edge/681872 "2026-06-02T07:00:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [June 2, 2026, 7:00am UTC](https://forum.kirupa.com/t/how-do-you-stop-ssr-hydration-from-flashing-the-wrong-user-state-at-the-edge/681872/1 "2026-06-02T07:00:14Z")

</div>

What’s up everyone? I’m wiring up SSR + edge rendering for a Next.js-ish app, and I’m trying to avoid a nasty flicker where the server renders “logged out” but the client immediately hydrates into “logged in”, so the header swaps and analytics double-fire.

```js
export async function getServerProps(req) {
  const token = req.cookies.session;
  const user = token ? await fetchUser(token) : null;
  return { user };
}

function Header({ user }) {
  const [clientUser, setClientUser] = useState(user);

  useEffect(() => {
    fetch("/api/me", { credentials: "include" })
      .then(r => r.ok ? r.json() : null)
      .then(setClientUser);
  }, []);

  return <div>{clientUser ? "Welcome" : "Sign in"}</div>;
}

```

In real life the edge cache sometimes serves a stale logged-out HTML shell, and then hydration “corrects” it; what’s the cleanest pattern to prevent the UI swap and duplicate side effects without killing caching?

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [June 3, 2026, 8:21am UTC](https://forum.kirupa.com/t/how-do-you-stop-ssr-hydration-from-flashing-the-wrong-user-state-at-the-edge/681872/2 "2026-06-03T08:21:29Z")

</div>

I’d stop the edge HTML from pretending it knows the user.

Render a neutral header on the server — “Account”, skeleton, whatever — then resolve auth on the client from `/api/me` or a non-cached personalized request. That avoids the logged-out → logged-in swap, and it keeps the cache useful.

For analytics, fire only after auth is resolved. One `authResolved` flag is enough; otherwise the page view runs once for the shell and again when the user state lands.