DEV Community

Cover image for ๐—ช๐—ต๐—ฎ๐˜ ๐—ถ๐˜€ ๐—›๐˜†๐—ฑ๐—ฟ๐—ฎ๐˜๐—ถ๐—ผ๐—ป, ๐—ฎ๐—ป๐—ฑ ๐—ช๐—ต๐˜† ๐——๐—ผ๐—ฒ๐˜€ ๐—ก๐—ฒ๐˜…๐˜.๐—ท๐˜€ ๐—ก๐—ฒ๐—ฒ๐—ฑ ๐—œ๐˜?
haitham medhat
haitham medhat

Posted on

๐—ช๐—ต๐—ฎ๐˜ ๐—ถ๐˜€ ๐—›๐˜†๐—ฑ๐—ฟ๐—ฎ๐˜๐—ถ๐—ผ๐—ป, ๐—ฎ๐—ป๐—ฑ ๐—ช๐—ต๐˜† ๐——๐—ผ๐—ฒ๐˜€ ๐—ก๐—ฒ๐˜…๐˜.๐—ท๐˜€ ๐—ก๐—ฒ๐—ฒ๐—ฑ ๐—œ๐˜?

In Next.js, we often encounter hydration errors, whether caused by our code or an extension that modifies the HTML. But before troubleshooting, it's essential to understand: What is hydration?

When using SSR (Server-Side Rendering) in Next.js, components that fetch only data (letโ€™s call them static components) are rendered as HTML on the server, without client-side interactivity. This means the initial content delivered to the browser is static and non-interactive.

Next.js then downloads the JavaScript bundle and "hydrates" the page by attaching event handlers and restoring interactivity.

In short, hydration is the process of adding back interactivity and event handlers lost during server-side rendering.

Top comments (0)