[Portal] Hydration failure in SSR when initially rendered

This manifests itself in Dialog and AlertDialog when using Portal with DefaultOpen in SSR env.

https://codesandbox.io/s/friendly-morning-3ny0r5?file=/pages/index.tsx

[laozhu]

The same issue here when working with next.js, any plan to fix this? Now my workaround is set the open to false default, then set it true in useEffect when page has mounted.

[andy-hook]

I’d like to know if this hydration error also relates to this issue. I’m conditionally rendering a Dialog or Button based on viewport size.

Not directly, no. The server has no concept of screen media size until it hits the client which is why is falls into the false block on server and hydrates true on desktop which reports a mismatch.