A package called @builder.io/react-hydration-overlay has been announced that helps with debugging React hydration mismatches. It automates the process of comparing the HTML sent from the server with the HTML generated on the client, making it easier to identify the mismatched element. The package works by injecting a script into the app's entry point and then displaying the data in an overlay. Currently, it only supports Next.js, but contributions are welcome.
Sort: