Links will sometimes hide the entire page when clicked

[leo]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:29:10 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.17
  pnpm: 6.30.1
Relevant packages:
  next: 12.0.11-canary.20
  react: 18.0.0-rc.0
  react-dom: 18.0.0-rc.0

What browser are you using? (if relevant)

Chrome 98.0.4758.80 (arm64)

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Clicking a Link that happens to have the same href as the current page causes the entire page to empty.

Here's an example:

CleanShot.2022-02-17.at.11.09.48.mp4

This problem only seems to happen with React Server Components enabled.

Expected Behavior

Clicking a Link that happens to have the same href as the current page should not cause the entire page to go empty.

Instead, it should behave exactly like without React Server Components enabled: You just continue to see the current page without any problems.

To Reproduce

1. Clone the Vercel's next-react-server-components example
2. Add <Link href="/rsc">This link points to the current page</Link> in pages/rsc.server.js
3. Click the link and watch the whole page go empty

[leo]

In addition to the problem described above, I also had been talking about another problem with @huozhi for the past couple days, which is one where every single Link click, even if it points to a completely different route, causes the page to go empty for a split second.

After digging a bit deeper, it turns out that, in both cases, display: none is applied to the root elements by Next.js/React, so the root problem might actually be the same for both.

Note that the screenshot I'm showing below is from Vercel's next-react-server-components example, so there's no code present in there that could cause these styles to be added. It must be Next.js or React.

[leo]

Thanks for landing the PR, @huozhi!

The issue of self-referencing Links causing a hidden page is now fixed.

The issue of the page temporarily hiding on every page transition remains, but I can try to create a separate reproduction case for that, so we can solve that too.

[huozhi]

I feel like it's still related to top-level suspense. I took a note for this. Thanks for reporting 👍

[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.