Server-side rendering frameworks built on React.js can create hydration errors that are often difficult to debug. Hydration errors can slow development time and slow website performance.
React offers hydration error warnings that lack specificity, with an additional option to suppress hydration errors, although that doesn’t solve the problem and applications pushed to production with errors can experience performance erosion.
Download the Next2O extension from the Chrome store Make sure you are on the tab where you have your application open (the one you like to debug hydration errors) Click on the Next2O extension to open Click the 'Debugging' tab to check for errors
If there are DOM nodes with hydration errors due to SSR mismatch, they'll appear in red. Description of the error(s) is listed below the DOM Tree Visualizer Go to the 'Performance' tab to run Lighthouse for Performance metrics. This displays the SEO, Performance and Accessibility scores. Click on ‘Save Data’ to store your performance data for Analysis
Detailed description for each metric from the lighthouse audit is displayed for quick overview and understanding.
If you have any issues using our debugging tool, please submit an issue on GitHub. You're welcome to fork our repo and test changes yourself, but we ask that contributors make an official pull request for any features they'd like to add, or bug fixes.
next2o.org