DEV Community

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

Posted on

2

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

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more