Double redirect in RSC page when using a loading boundary

[PaulWild]

Link to the code that reproduces this issue

https://github.com/PaulWild/multiple-redirects-in-rsc/

To Reproduce

• go to /
• Server component will redirect to /api/redirect
• The api route is called twice as seen by the terminal logs.

Current vs. Expected behaviour

The api route should only be called once

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
  Available memory (MB): 15935
  Available CPU cores: 8
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.62 // Latest available version is detected (14.3.0-canary.62).
  eslint-config-next: N/A
  react: 19.0.0-beta-4508873393-20240430
  react-dom: 19.0.0-beta-4508873393-20240430
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Navigation

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

next dev (local), Vercel (Deployed)

Additional context

This doesn't happen if there aren't any loading pages. This seems to be related to #57257

[icyJoseph]

Interesting... so the problem is not as phrased by the title, thought the problem exists.

One way to see the issue is with the devtools network, and preserve logs, but another is to modify the api endpoint to:

import { NextRequest, NextResponse } from 'next/server';

export const GET = (req: NextRequest) => {
  console.log('redirect called', req.nextUrl.searchParams.get('_rsc'));

  return NextResponse.json({ hello: 'there' });
};

And now you see, where this is going. When you have the loading file, Next.js serves that suspense boundary to the client, so Loading is seen by the client.

Then the framework is making a request for _rsc data to the endpoint, not that this endpoint serves 200 + json, an at the same time the framework is making a request to the endpoint, without the _rsc query.

I'd seem that this PR, #63786, referenced in #57257 should indeed take care of this 🤔

[PaulWild]

ah nice, what would be a more appropriate title?

[icyJoseph]

I think the issue is still, a Double redirect when using a loading boundary and Route Handlers

From the test I see that, the intention had been to redirect to another page, not a Route Handler.

Though I am not sure I have the time to investigate a whole lot, but the issue is interesting to say the least.

[PaulWild]

Thanks hopefully a more appropriate title will help attract some more interest, it is slightly different as this issue is present if you redirect to another Page and a route handler. My example was a route handler as that is a cut down version of our use case (We need to do some cookie clean up and that was the only way we could think in the flow we have).

There is a work around that if the redirect is down in a child client component then you do not get the double render. However this is a bit messy and is not ideal

[icyJoseph]

Alright, I see, the odd thing is that the test introduced by #63786 should really be guarding against that... I'll try to run the tests on this machine, to see what's up

[icyJoseph]

Ok, I got them tests running here, and isolated to the test introduced in #63786 plus a router handler test redirect I wrote, and I can see that, the test is making sure the UI doesn't change, because the redirected to page (or my route handler), render with Date.now, so the assumption is made, should you show two different dates to the client, then you definitely did a double redirect, but that's not the entire picture.

I can see that the server makes a request with _rsc, and one without it, where it'd seem that the UI ignores one, and uses the other, and that makes the test assumption pass.

I'll see if I can change the check to make the test fail.

[stx-chris]

We're experiencing the very same issue, which seems to have been introduced in 14.2.2 or 14.2.3.

We temporarily downgraded to 14.2.1, which doesn't show this weird behavior. For our use case it is critical, as the redirect involves a third party data generation API which doesn't allow the same url (incl. query params) to be called twice.