handling 404 json after deployment

[correttojs]

Conditions

• next.config target: server
• getServerSideProps return some dynamic data for /test

1st Release

• client navigation hits /_next/data/buildID_1/test.json

2nd Release

• client navigation hits /_next/data/buildID_2/test.json

After the 2nd release, some of the clients may still run the first version, thus they request /_next/data/buildID_1/test.json which returns a 404 (I think this doesn't happen on serverless mode as the old lambda is still alive). The result is that the client navigation enforces a page reload and the new version is loaded.

Given this scenario, is the end user affected by any issue, except the full page reload? (i.e. any error or inconsistent state)

Is there any way to handle these 404 responses more gracefully within the next server? For example intercepting these requests and returning an empty response to the client

[timneutkens]

The result is that the client navigation enforces a page reload and the new version is loaded.

This is expected behavior and ensures that most users are immediately on the newly deployed application which is generally what you want.

[stephanbakker]

Update:
Next's throws this error first: Error: Failed to load static props
after this: Uncaught (in promise) Error: Invariant: attempted to hard navigate to the same URL

I tried to catch this with 'routeChangeError' Router event, but that is not giving solid data to rely on.

[stephanbakker]

I found why this is failing for us:
reproduction repo: https://github.com/stephanbakker/nextjs-404-after-deployment

After deployment navigation failed/stopped working in the following case:

• If you are e.g. on /step1 page
• Do a new deployment
• Then navigate to /step2 while staying on /step1 (using router.push('/step2', '/step1'))

Then the step2.json returns a 404, it tries to do a full refresh on the 'as' route, which is /step1. This case fails.

[silviow]

@correttojs @stephanbakker Hey! Have you made progress on this topic? 👀

Could you share if you found a solution, please? :)

[jlopezxs]

I have a solution but not the most elegant one. If you add a custom BUILD_ID all the request to /_next/data/{BUILD_ID} will include it. With that you can create a middleware like

// middleware.ts
export function middleware(req: NextRequest) {
  const isNextDataRequest = req.url.includes('_next/data');
  const isCurrentBuildRequest = req.url.includes(
      `_next/data/${process.env.NEXT_PUBLIC_BUILD_ID}`,
    )
  
  if (isNextDataRequest && !isCurrentBuildRequest) {
    // MANAGE IT
  }
  ...
}

If you want to manage it more in the client to show a message or something like that maybe you need to decorate the window.fetch and detect with the same strategy when is calling to the old version

[m-bp]

After the introduction of skew protection, is the hard reload still forced and inevitable?