React
React text content does not match server-rendered HTML
Text content does not match server-rendered HTML.
React detected that text rendered on the client does not match the HTML produced by the server, causing hydration to fail for that subtree.
Observed message
Text content does not match server-rendered HTML.
Why it happens
- The server and client render different text values.
- Text depends on time, randomness, locale formatting, or browser-only data.
- A hydration-sensitive component renders different output on first client render.
How to fix it
- Make the initial server and client text output deterministic.
- Move browser-only or time-sensitive text generation out of the hydration-critical render path.
- If necessary, render a stable placeholder first and update after mount.
