calling `redirect()` inside a server component causes flashing UI

AI Summary

The issue involves UI flashing when using `redirect()` inside server components, causing a blank page during redirection. The problem seems related to how Next.js handles redirects and fetches in server components. The scope is somewhat clear, but understanding the internal behavior of Next.js is necessary to fix it.

Issue Description

Link to the code that reproduces this issue

https://github.com/Fredkiss3/bug-next-redirect-flashing-ui

To Reproduce

click on the link
you will see a blank page while the page is being redirected

Current vs. Expected behavior

You can see in the video below that for server actions it works as expected, the page don't flash while being redirected (this is the desired behavior), while for link it doesn't :

https://github.com/vercel/next.js/assets/38298743/415037db-31a9-4cde-9b13-4f7c6eb99c3a

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:43:05 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6020
Binaries:
  Node: 18.17.1
  npm: 9.6.7
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.5
  eslint-config-next: 13.4.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

calling `redirect()` inside a server component causes flashing UI

Why this is a good first issue

AI Summary

Issue Description

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

GitHub Labels

Want to work on this?

Risk Flags

Details