[Bug] Hydration mismatch occurs after HMR + page refresh in Remix + Vite dev mode

[nosicknnodie]

Reproduction

Steps to reproduce:

1. Create a new Remix project using Vite
2. Start dev server: pnpm dev
3. Open the browser and go to /
4. Edit routes/_index.tsx and change any text or tag (e.g.,
   →

   )

5. Browser shows correct update via HMR
6. Refresh the browser → Hydration mismatch error appears in console

Optional repo: [you can paste your GitHub repo link or say “not uploaded yet”]

I'm happy to prepare a repro repo if needed.

System Info

Remix: 2.16.5
React: 18.2.0
Vite: 6.x (via remix vite plugin)
Node: v22.x
OS: macOS M2

Dev server: `remix vite:dev`
Browsers: Safari 18.4

Terminal command used: `pnpm dev`

Used Package Manager

pnpm

Expected Behavior

After editing a file and applying HMR, refreshing the browser should hydrate successfully without mismatch errors — even when tag structures or text content have changed.

Actual Behavior

Hydration mismatch occurs after refreshing the browser — even if the previous HMR applied successfully.
This happens frequently when changing tag structures or text nodes in routes like _index.tsx.

SSR HTML and client-rendered React tree do not match on hydration.

I tried adding Cache-Control: no-store to the route loader, and also tested client-only rendering using useEffect, but the issue still reproduces.

If this is expected behavior for Remix + Vite development mode, I'd appreciate confirmation or best practices to avoid this issue during development.

---This issue report was prepared with the help of ChatGPT (for summarization & formatting).---