Server-side rendering links incorrect component

[SimplyComplexable]

Bug report

Describe the bug

I have certain circumstances where a component is rendered differently on the server then the client due to certain data being available.
In next versions prior to v9.0.7 this didn't cause any issues, but in every version since Next gets confused about which component is being rendered and starts to mix up the styles

To Reproduce

See the reproduction repo here
As stated in the README

• Test should render with a blue background
• Test2 should render with a red background
• If this is rendered on the server Test both with have a red background.
• If this is rendered by Fast Refresh / HMR it will render correctly.

If you downgrade next to 9.0.6 it will render correctly regardless

Expected behavior

It should render correctly regardless.

Screenshots

System information

• OS: macOS
• Browser (if applies) chrome
• Version of Next.js: >9.0.6
• Version of Node.js: multiple version 12 and up

Additional context

[leossantiago]

Testing the reproduction repo, 9.0.6 renders styling properly, but still shows this warning:

Searching a little bit further, the same behavior occurs until 9.0.7-canary.9, when Suspense component was dropped in #8887 due to problems with React.

Building a custom version of Next, (9.5.4-canary.15) re-including Suspense where it used to be solves your problem, but creates the same warning mentioned above (without the Source map error part). If I'm not mistaken, it's a dev-only warning, so it doesn't show in production.

I don't know if that would be a proper solution, since it fixes one thing and 'breaks' (or might break) another.

What do you guys think? @SimplyComplexable @timneutkens

Edit: Linking @Timer since he was the author of PR #8887

Is putting back Suspense a doable solution?

[bananashell]

I had a similar issue, I think I went around it by setting a state variable in a useEffect that acts as isClient/typeof window !== undefined. And use that state variable to conditionally render stuff on the client
The issue seems to have gone away atleast.

[jankaifer]

this issue is quite old and it was probably resolved already since it was mentioned that including suspense fixes this.
Could you check in the latest canary?

[timneutkens]

Going to close this as it's a hydration mismatch, latest version of Next.js will show the error overlay for this case, it should indeed use useEffect to setState as bananashell explained 👍

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.