RR7 complains "No `HydrationFallback` element provided ..." for CSR-only config (using Custom Framework)

[rolanday]

### I'm using React Router as a...

framework

Reproduction

https://codesandbox.io/p/github/rolanday/rr7-csr-hydration-warning/main?import=true
or
https://github.com/rolanday/rr7-csr-hydration-warning

To repro, simply run in dev mode and note the browser console output (or see attached screenshot).

System Info

System:
    OS: macOS 14.7.1
    CPU: (24) arm64 Apple M2 Ultra
    Memory: 426.23 MB / 128.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.1.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: 9.14.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 17.6
  npmPackages:
    react-router: ^7.1.1 => 7.1.1 
    vite: ^6.0.5 => 6.0.7

Used Package Manager

pnpm

Expected Behavior

As this is a custom framework config (with no SSR option), the hydration warning message is unexpected (i.e., expecting to see no such warning).

Actual Behavior

A hydration warning is issued for a CSR only configuration.

Edit: Attached Screenshot

[danielweinmann]

@rolanday, this is an expected warning since you have a loader running an async operation. RR needs to know what to render while the loader runs, so you must provide at least one hydrate fallback component/element in the render tree to show a pending UI.

Note that you don't need to provide it in all your routes. If you have a root layout with a "global" HydrateFallback, it's enough to show a minimal pending UI and suppress the warning.

[rolanday]

Thank you for the clarification @danielweinmann -- make sense and it's the terminology that threw me off. In the context of javascript frameworks, I think SSR when I hear 'hydrate". If hydrateFallbackElement were named hydrateOrFallbackElement or just fallbackElement, it would have been self-explanatory (to me anyway). Thanks again!!