Middleware page data fetch 404 causing Page component to return undefined data

[andrewnick]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 14.18.2
      npm: 6.14.15
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.3.1
      eslint-config-next: 11.1.0
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

In 4-5% of our users we are seeing in our google analytics that they are receiving a 'Page Not Found' for valid pages. These pages do work most of the time and so we have quite a bit of trouble replicating this issue.

Our page is a dynamic SSG page that when there is an issue with the data or an error comes back from our Apollo client it renders an Error component. The Error component will set the page to 'Page Not Found'. This issue has come in when upgrading to Next.js 12.2 and we believe it is to do with the update to the middleware. Unfortunately we need it for prefixing the default locale otherwise we could just remove it.

What we think could be the issue is that as there an extra fetch for page data when using middleware then it could be possible that the page is trying to fetch the data from an old deployment folder and then getting a 404 on the fetch. Once it 404's then undefined data is return to the component causing the Page component to render the Error component within it. In our datadog logs we do see 404 errors for the page data e.g /_next/data/TZOMVjjp6O7ETtw-t1234/en/page-name.json?slug=page-name.

Using a network interceptor tool (https://tamper.dev/) we can force a 404 and we do see the behaviour described above but without understanding how all this works under the hood it is hard to know if this is a valid test.

Expected Behavior

404's on the fetch for page data don't cause the page to break.

Link to reproduction

https://codesandbox.io/s/angry-nightingale-dgz4vo?file=/pages/%5B...slug%5D.tsx

To Reproduce

1. In the codesandbox browser add a path to the page e.g. https://dgz4vo.sse.codesandbox.io/test. The name of the path will render on the page.
2. Cause the fetch for page data to 404 e.g. using a tool to intercept the page fetch network request for https://dgz4vo.sse.codesandbox.io/_next/data/development/test.json?slug=test
3. View that the slug data is undefined/falsy.

[muhammadjufry]

Can you send the screenshot, please?

[andrewnick]

I have added a video of the reproduction above https://www.loom.com/share/38e903f0c81147dda61a3230bdec886a

[williamli]

@andrewnick The behavior reported at https://codesandbox.io/s/angry-nightingale-dgz4vo is expected behavior. Data from getStaticProps are sent to your page using /_next/data/*json files so if you tampered with the initial loading of this json file, it will result in your page not receiving any props.

[vercel-release-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[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.