Loading...
Loading...
Error: Hydration failed because the initial UI does not match what was rendered on the server.This is the most common error in Next.js and the 'Final Boss' of SSR. It happens when the HTML generated on the server (SSR) differs from the HTML generated during the first render in the browser (Hydration). React detects this mismatch and throws an error to prevent the UI from being broken or non-interactive.
Ensure that sensitive dynamic parts of your UI only render after the component has mounted on the client.
const [isMounted, setIsMounted] = useState(false);
useEffect(() => setIsMounted(true), []);
if (!isMounted) return null; // or a skeleton
return <div>{window.innerWidth}</div>;Force a component to only render on the client side using next/dynamic.
import dynamic from 'next/dynamic';
const ClientOnlyComp = dynamic(() => import('./Comp'), { ssr: false });Ensure your HTML structure follows strict rules. Common illegal structures: <div> inside <p>, <a> inside <a>, or <table> tags without <tbody>.
/* ❌ WRONG */
<p>
<div>This will cause a mismatch</div>
</p>
/* ✅ FIXED */
<div>
<p>This is safe</p>
</div>If you have a small mismatch that is impossible to avoid (like a timestamp from an external API), use the suppressHydrationWarning prop.
<div suppressHydrationWarning>{timeFromApi}</div>React 19 prioritized performance by making hydration "resilient," but mismatches still cause a "re-render from scratch" for the entire component tree, which destroys performance and SEO speed scores. Fixing this is critical for Core Web Vitals.