🐛 Bug: Hydration mismatch in img alt attribute (server vs client) #2340
Description
Describe the bug
When running the JSON Schema website locally, a React hydration warning is
logged in the browser console on every page refresh.
The warning indicates a mismatch between the server-rendered HTML and the
client-side React render for an img element’s alt attribute. The server
and client output differ due to whitespace normalization, which causes React
to report a hydration mismatch.
Steps To Reproduce
Clone the json-schema-org/website repository
Install dependencies
Start the local development server
Open the homepage in the browser
Refresh the page
Observe the hydration warning in the browser console
Expected Behavior
The homepage should hydrate cleanly without any React warnings, and the
server-rendered HTML should exactly match the client-side render.
Screenshots
Screenshots
Screenshot of the browser console showing the React hydration warning is
attached for reference.
Device Information [optional]
- OS:
- Browser:
- version:Are you working on this issue?
Yes
Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)
Yes