React
React recovered hydration by client rendering the entire root
There was an error while hydrating but React was able to recover by instead client rendering the entire root.
React hit a hydration failure serious enough that it abandoned hydration for the whole root and switched to full client rendering.
Observed message
There was an error while hydrating but React was able to recover by instead client rendering the entire root.
Why it happens
- The initial client render does not match the server-rendered HTML.
- Critical root content is non-deterministic between server and client.
- A hydration error occurred outside a smaller recoverable boundary.
How to fix it
- Compare server and client output for non-deterministic values such as time, randomness, and environment-specific APIs.
- Move browser-only logic out of the initial render path.
- Use smaller boundaries where appropriate so hydration failures do not escalate to the entire root.
