React 18 / next12 ssr hydration error

[dblodorn]

Seems that with react 18 nextjs upgrade developers should be very explicit in their markup in regards to what should and should not be rendered server side. And make sure markup is semantic.

Otherwise you'll encounter the hydration errors.

vercel/next.js#35773 (comment)

[dblodorn]

@0xTranqui we should probably just do something like this:

const [isSSR, setIsSSR] = useState(true);

useEffect(() => {
	setIsSSR(false);
}, []);

or:

https://nextjs.org/docs/advanced-features/dynamic-import

import type { NextPage } from 'next'
const  ComponentName = dynamic(() => import('../components/ComponentName'), { ssr: false })

bottom line anything that is dynamic on the client should not attempt to render on the server - new react and nextjs are much more strict on this.

[0xTranqui]

@dblodorn sorry just following up on this. not clear to me where to make this update in the app im running and this package to clear up this issue