Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch

Developing with Prismic
1

We recently launched our new website using the combination of Prismic, Next.js, and Amplify. Currently, we have transitioned some of our pages to Prismic, but we also need to continue serving our existing files. To achieve this, we decided to split traffic using CloudFront, which has worked well overall. However, we've encountered a specific issue related to the mobile hamburger menu.

When users click on the hamburger menu on mobile devices, we encounter the following error:

Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch

Additionally, when examining the network activity in the browser, we notice that all our prismic URLs are fetching from every page with the following search parameter:

?_rsc=acgkz

We are uncertain about the origin of this issue and would greatly appreciate input from experts in the field.

3

Hey @webdev3 ,

I've never ran into this issue before. I'm really not sure if it's related to Prismic and I'm not familiar with your stack, but I can try my best.

Can you give me more details about how you deployed your website? Can you show me the code for the hamburger menu and your route resolver?

Thanks.

4

Thanks for your reply, the hamburger issue got resolved but the RSC payload issue is still there, here is the route

const routes = [
  {
    type: "solution_pages",
    path: "/solutions/:uid"
  },
  {
    type: "industry_pages",
    path: "/industries/:uid",
  },
  {
    type: "product_pages",
    path: "/products/:uid",
  },
  {
    type: "page",
    path: "/:uid",
  },
  {
    type: "page",
    uid: "home",
    path: "/",
  },
  {
    type: "settings",
    path: "/",
  }
];
5

How are you querying the links?

It looks like this issue on StackOverflow, are you using redirectToSearchResults in your hamburger menu?