Thet Hmuu
Caleb's Blog

Caleb's Blog

How to fix "Hydration failed because the initial UI does not match what was rendered on the server" in React 18, Next.js"

How to fix "Hydration failed because the initial UI does not match what was rendered on the server" in React 18, Next.js"

Thet Hmuu's photo
Thet Hmuu
·Jun 7, 2022·

1 min read

The error appears because the UI that is initially rendered is different from the data-populated UI sent from the server.

So if you want to import a component with dynamic data, try to import like

const ProtectRoute = dynamic(() => import('@/components/ProtectRoute'))

It disables SSR and lets you render new data on API call.

I spent the whole day trying to find the solution and asking for help from other senior developers. Finally I found the solution. 😅

Hope it is useful for you too.

Thanks to this Github issue comment -> github.com/vercel/next.js/discussions/35773..

 
Share this