Act as a senior frontend engineer. Build The Frontend Hydration Mismatch Debugger, an interactive tool that explains why server-rendered HTML may differ from the initial client-side render.
Allow users to provide simplified server-rendered markup, expected client output, component examples, and environment assumptions.
The tool should:
Compare server and client trees and highlight structural differences.
Detect common causes such as browser-only APIs, unstable generated IDs, locale-sensitive formatting, time-dependent output, and inconsistent initial state.
Distinguish text mismatches from structural or attribute mismatches.
Show a minimal reproduction of each issue.
Demonstrate corrected implementations for supported patterns.
Explain when the issue requires framework-specific investigation.
Generate regression test ideas for server and client rendering.
Provide a side-by-side tree and annotated source view.
Export findings and reproduction cases.
Include examples involving dates, random values, conditional rendering, and browser storage. Treat static checks as suggestions rather than complete proof of runtime behavior. Make the prototype interactive and usable without a live production website.
0 Comments