---
title: Text content does not match server-rendered HTML
---
## Why This Error Occurred
While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser (hydration).
[Hydration](https://react.dev/reference/react-dom/client/hydrateRoot) is when React converts the pre-rendered HTML from the server into a fully interactive application by attaching event handlers.
### Common Causes
Hydration errors can occur from:
1. Incorrect nesting of HTML tags
1. `` nested in another `
` tag
2. `
` nested in a `
` tag
3. [Interactive Content](https://html.spec.whatwg.org/#interactive-content-2) cannot be nested (`` nested in a ` ` tag, `` nested in a `` tag, etc)
2. Using checks like `typeof window !== 'undefined'` in your rendering logic
3. Using browser-only APIs like `window` or `localStorage` in your rendering logic
4. [Browser extensions](https://github.com/facebook/react/issues/24430) modifying the HTML
5. Incorrectly configured [CSS-in-JS libraries](https://nextjs.org/docs/app/building-your-application/styling/css-in-js)
1. Ensure your code is following [our official examples](https://github.com/vercel/next.js/tree/canary/examples)
6. Incorrectly configured Edge/CDN that attempts to modify the html response, such as Cloudflare [Auto Minify](https://developers.cloudflare.com/speed/optimization/content/auto-minify/)
## Possible Ways to Fix It
The following strategies can help address this error:
### Solution 1: Using `useEffect` to run on the client only
Ensure that the component renders the same content server-side as it does during the initial client-side render to prevent a hydration mismatch. You can intentionally render different content on the client with the `useEffect` hook.
```jsx
import { useState, useEffect } from 'react'
export default function App() {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return {isClient ? 'This is never prerendered' : 'Prerendered'}
}
```
During React hydration, `useEffect` is called. This means browser APIs like `window` are available to use without hydration mismatches.
### Solution 2: Disabling SSR on specific components
Next.js allows you to [disable prerendering](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr) on specific components, which can prevent hydration mismatches.
```jsx
import dynamic from 'next/dynamic'
const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })
export default function Page() {
return (
)
}
```
### Solution 3: Using `suppressHydrationWarning`
Sometimes content will inevitably differ between the server and client, such as a timestamp. You can silence the hydration mismatch warning by adding `suppressHydrationWarning={true}` to the element.
```jsx