Calling redirect from a React Server Component to an intercepted route causes infinite rerendering loop

[denexapp]

Link to the code that reproduces this issue

https://github.com/denexapp/redirect-from-rsc-to-intercepted-route-bug

To Reproduce

1. Start the dev server
2. Open the main page and click on the Link
3. Watch the terminal and the browser console for a list of errors / rerender messages

Current vs. Expected behavior

Expected behaviour:

• A component from the intercepted route renders once

Current behaviour:

• Component gets rerendered in a loop
• Navigation works incorrectly, causing weird errors and sometimes crashing the app

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #18~22.04.1-Ubuntu SMP Tue Nov 21 19:25:02 UTC 2023
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.14.1
Relevant Packages:
  next: 14.1.1-canary.20 // Latest available version is detected (14.1.1-canary.20).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.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)

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

next dev (local), next start (local), Vercel (Deployed)

Additional context

The issue occurs with:

• with babel / without babel
• on mac os / on github codespaces
• with turbopack / without turbopack
• on canary (14.1.1-canary.20) / on stable (14.1.0)
• with bun / with node
• locally / on Vercel

[xvvvyz]

Client component redirect has the same issue in my experience:

1. Navigate to an intercepting route
2. Navigate to another intercepting route from the previous one
3. router.back() + router.refresh()
4. Infinite rerendering loop

Removing the loading.tsx file for the parallel route modal fixes it... but...

Feels related to https://github.com/vercel/next.js/issues/61117

[chungweileong94]

Feels related to #61117

Hmm, not sure if they are related. I didn't actually get any errors in my console in #61117, instead I get endless network request instead.

But still, something must be went wrong in the parallel/intercepted routes in v14.1.

[xvvvyz]

Hmm, not sure if they are related. I didn't actually get any errors in my console in #61117

I'm not seeing errors either with the steps described above actually. It just gets stuck on loading.tsx with infinite requests.

[634750802]

Same problem with Vercel edge config.

[634750802]

will https://github.com/vercel/next.js/pull/61687 closes this?

[denexapp]

I don't know how next works under the hood. To me, it does look similar but not related. Let's see when these changes land to canary

[Cybermb]

I have the same problem in my application using next 14.1.0. There is a page at /admin which all it does is call redirect("/admin/users") (very similarly to your example). Navigating to /admin using a link for a first time will cause infinite re-render loop. I have tried these server side redirect options: redirect(), permamentRedirect(), redirects in next.config.js. All of them causes same issue, even in production mode but without console warnings. Same happens with next@canary, [email protected], [email protected]

app-index.tsx:25 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at HandleRedirect
    ...

[Cybermb]

After some investigation I have found out that this is not a nextjs bug. In your example the issue is that you have named your folder (.)photos. Renaming to just photos seem to eliminate the issue. As for my case, it seem that I had a bug in route layout, where redirect("/admin") function was outside desired condition check. This is why navigating to /admin would cause loop 😅

[denexapp]

The (.) naming is a required convention for Intercepting routes (1 subtree renders instead of another subtree). Without it it would be regular parallel routes (2 subtrees render at the same time).

Provided example is based on the official Vercel Nextgram example which uses the (.) convention as well, I did the minimum changes to reproduce the issue.

There's a chance that i have a bug in my code, but honestly I wish it was true, cause it is causing me a lot of pain to avoid the bug in a real app.

[Cybermb]

My apologies. I did not know about these advanced routing features. In context of example, it seems that navigating to /redirectToModal does intercept route correctly. I think the problem is that this route does not render anything, but then intercepts the modal, which is rendered correctly, but page still is trying to redirect, causing the loop? In the docs it says that interception overlays data on current context, but since nothing is rendered, there is no context. Not sure about your intention with this redirect, but if:

1. You want to intercept route, then you could render client component, that redirects to the desired page.
2. You want to render only the photo, without overlaying page, then you need to find a way to stop route intercepting on route where you want to redirect.

[github-actions[bot]]

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.