Server-side redirect from a page with Loading causes double redirect

[harunsmrkovic]

Link to the code that reproduces this issue

https://github.com/harunsmrkovic/double-redirect-nextjs-repro

To Reproduce

1. Open /parent route
2. Observe the timer shown on the redirected /parent/child route

Bildschirmaufnahme.2023-12-20.um.10.42.35.mov

Current vs. Expected behavior

I expected that after moving from Loading screen of Parent route and showing the child route, there will be no more redirects/refreshes done

In other words, I expected that once I land on /parent/child route that the timer will start from 0 and just increase, never going back to 0.

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:42:57 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8112
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.19
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

Additional context

I was testing only locally, in Chrome, Safari & Electron (Cypress).
EDIT: It is also reproducible in a production build in a deployed version.

Removing the loading.tsx page from the parent route resolves this issue.

_NEXT-2952

[LineGu]

I think it's because the strict mode of react is turned on

[harunsmrkovic]

@LineGu but that mode is not relevant in production build, is it?

[tomdohnal]

I've been looking into this issue as well and this is what I came to:

In the redirect function API reference (https://nextjs.org/docs/app/api-reference/functions/redirect), this is stated:

When used in a streaming context, this will insert a meta tag to emit the redirect on the client side.

This means that what happens is:

1. The page initially loads and displays the contents of the loading.tsx file
2. Soon after, the contents of of loading.tsx file is swapped for the contents of whatever page you'll be redirected to
3. Bcs the <meta http-equiv="refresh" content="1;url=..."/> tag is inserted, the browser reloads the page at the URL passed to the said meta tag, essentially resulting in a browser refresh

For more context, I found this PR that initially implemented injecting the meta tags: #47207

My understanding is that using the meta tag is best practice for SEO as it indicates to search engine crawlers that the page is redirected (as you can't use HTTP status codes to indicate redirection when using streaming response).

That said, I think there should be a mechanism to opt out of this as it results in poor user experience.

[dihmeetree]

Also experiencing this as well. I noticed that permanentRedirect (https://nextjs.org/docs/app/api-reference/functions/permanentRedirect) does not cause the refresh, so i've been using that.

[steven-tey]

@dihmeetree is permanentRedirect still working for you? I just tried on latest canary and it doesn't seem to work :(

[samcx]

Hmmm it just worked for me @steven-tey (using permanentRedirect). Digging into what permanentRedirect does and the comment above that may highlight the issue

[steven-tey]

permanentRedirect still doesn't work for me, but I think it might be worth digging into the root of the issue and fix this for redirect since we might not want to do permanent 301 redirects in all cases and cause links to be cached in the user's browser

[github-actions]

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