Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrites manipulate RSC requests breaking client side routing #69296

Open
michael-kleemann opened this issue Aug 26, 2024 · 0 comments
Open

Rewrites manipulate RSC requests breaking client side routing #69296

michael-kleemann opened this issue Aug 26, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@michael-kleemann
Copy link

Link to the code that reproduces this issue

https://github.com/michael-kleemann/proxy-showcase/blob/main/next.config.mjs

To Reproduce

  1. Create a rewrite config like this
  async rewrites() {
    return {
      afterFiles: [],
      fallback: [
        {
          source: '/subpath/',
          destination: 'https://localhost:3001/subpath/',
        },
        {
          source: '/subpath/:path*',
          destination: 'https://localhost:3001/subpath/:path*',
        },
      ],
    };
  },
};
  1. Setup a simple node app that logs requests on port 3001

  2. Send a RSC request to the app https://localhost:3000/subpath/3?_rsc=1c0y5.
    App on port 3001 does not receive query ?_rsc=1c0y5

  3. Send another request with a different query parameter to the app https://localhost:3000/subpath/3?foo=bar.
    App on port 3001 receives query ?foo=bar

There is also a hosted example that shows the broken routing when RSC requests are being rewritten to another app.
https://proxy-showcase.vercel.app/proxy-opennext-target
The console shows that RSC requests are resolved with a .rsc suffix which should normally not be added.
image

Current vs. Expected behavior

Current Behavior:
The RSC request is manipulated in the rewriting process. This breaks functionality when rewriting to another NextJs app is intended. In our case we rewrite a path on our domain to another NextJs App. In this path the client side routing is broken as RSC requests are not resolved correctly. The target app resolves the RSC request with an invalid dynamic route id as a suffix .rsc is added to the id.

Expected Behavior:
The RSC request is rewritten without any manipulation.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
Binaries:
  Node: 22.6.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.7.1
Relevant Packages:
  next: 14.2.2 
  eslint-config-next: 14.2.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5

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

Navigation

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

Other (Deployed)

Additional context

I've validated that another rewrite mechanism via CDN does not break the client side routing.
Only when rewriting is done by NextJS the routing is broken.

@michael-kleemann michael-kleemann added the bug Issue was opened via the bug report template. label Aug 26, 2024
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Aug 26, 2024
@vercel vercel deleted a comment Aug 26, 2024
@michael-kleemann michael-kleemann changed the title Rewrites manipulate RDS requests breaking client side routing Rewrites manipulate RSC requests breaking client side routing Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

No branches or pull requests

1 participant