404 page triggers on every page

[itsLaserr]

Link to the code that reproduces this issue

https://github.com/itsLaserr/min-repro

To Reproduce

Clone my repo https://github.com/itsLaserr/min-repro npm run dev or npm run build and npm run start

Current vs. Expected behavior

Current behavior On page load or switch "404 page" console logs, this console log is located in the notfound page and this is not supposed to happen as nothing on the current page resulted in 404. This happens on ALL pages

Expected behavior its Expected that on page load or switch where nothing is 404 the notfound page shouldnt get triggered in any way as it has nothing to do with the current page.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16252
  Available CPU cores: 12
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

Runtime

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

next dev (local), next start (local)

Additional context

No response

[BatuhanAktan]

Hello itsLaserr,

I was just looking through your repo and was not able to reproduce On page load 404 page not found, however, when navigated to other pages using the navbar I did notice the 404 page not found.

I believe that your navbar points to /dashboard, which at the moment does not have any content associated with it which results in the 404 page. I fixed this issue by creating a folder for your dashboard page and adding some filler content which currently eliminates the problem you have. Please check your pull requests to access the contribution.

Let me know if this fixes your problem!

[itsLaserr]

I tried adding content to the dashboard, but still nothing. It logs to the console on every page load. Here you can see what was logged to the console when I navigated from the dashboard to the home page, as I added a console log in the 404 page to also show the current path:

404 page
/dashboard
404 page
/

Also, I tried removing the navbar completely, and the issue was still there, so this can't be related to the navbar.

[Wesley-Fernandes]

I fix that removing the folder App who is out of the of src.

I think if you drop your App to src folder it will work.

[itsLaserr]

I don't have a src folder, so i should make one and put the app in it? don't understand how having a src folder changes anything as its just for organization, I tried it and nothing changed, still the same thing happens

[BatuhanAktan]

Interesting, so I think the problem lies within the not-found.js file. In the file you console logged the "404 page" and the url which runs but does not indicate a page not found. I've deleted these console logs and you should not get any more of the error. I submitted the PR or you can clone this repo to see here Next Js makes it super easy to have custom 404 pages, you can use this link to see how here Please let me know if this fixes the issue.

[itsLaserr]

Yes but that doesn't really fix the bug it just ignores it, i added the console logs to find the issue. So i will remove the console logs but this isn't solved as the 404 page should't trigger on every page.

[BatuhanAktan]

Have you had a chance to clone the forked repository to review the changes I made? Because on my end all the functionality is as intended. I will attach the following pictures to show what is happening on my end, Home Page Dashboard Dashboards (A page that does not exist)

The repo to clone is this one

I would say try cloning this repo, then run npm install and npm run dev to see if there are any improvements

Let me know if that fixes the issue

[richardtaylordawson]

@BatuhanAktan that doesn't fix the issue and I also have the issue you're talking about @itsLaserr.

I actually created a new app this morning with create-next-app. Then added a not-found.js file. Then added console logs to the home page and not-found page. Go to the home page, home page renders, but console logs for both components run.

I can reproduce the issue with your code above as well @BatuhanAktan

My only assumption is nextjs might do this in order to have the code ready for the 404 page in case the notFound() function is called at any point? But still seems dumb if that's the case..

[mmdrn]

I encountered the same issue. I identified it by placing a sentry.captureException. After deploying it to production, we discovered that the issue was occurring frequently, with numerous instances within just three hours. As a result, we had to disable it urgently. @richardtaylordawson @itsLaserr @cyaxaress

This issue also exists in a completely new project.

[mmdrn]

I also downgraded Next.js to version 13.5.x, but the issue still persisted.

[tempranova]

I'm getting this as well. It's a bit of a challenge because I want to show the user some suggestions via a database search when they land on the 404 page, but I don't want that DB search to run on every load, so I'm suspicious it will when the console log runs while viewing a totally normal non-404 page

[zogss]

Does anyone has a solution or a workaround to this behavior of next.js?

[luisvieiragmr]

Hey @timneutkens @leerob i also see this behaviour for every trace the not-found page appears on all dynamic routes traces is this intended behaviour in nextjs ?

[marlo22]

+1

Would it be possible to fix it?

In our case this issue makes impossible to attach a Sentry 404 errors handler, because it sends logs all the time, even if the current page exists.

[corbin-mosher]

This was rough to run into, for the same reason tempranova mentioned above. We also need to fetch data for the 404 page. Adding those data fetches just to find them running on all page loads is pretty brutal and unexpected.

We also have a large site where the layout for different portions of the site differs. So the 404 page needs to pick the layout it desires. But since it runs twice, it will also execute its chosen layout on... you guessed it... every page load.

This feels like a pretty high priority bug. The only way I can think of to get around the issue would be to sacrifice SSR for 404 pages and dynamically load in content after reaching the client, just to ensure the 404 page executing for all pages doesn't actually come with computation weight and side-effects. But doing that is a huge loss and would be even more difficult in our case where it needs to be wrapped in a shared layout component which is already crafted as a server component and wouldn't work in that format.

[richardtaylordawson]

@corbin-mosher I have the same issue and have messaged Vercel/Nextjs team about it. I'd rather not have the 404 page be static and sacrifice the SSR because I'd rather that pull directly from the CMS so that a content team can update the page content/layout/etc at any point.

Also, it allows us to have multiple 404 pages for each language as well

[richardtaylordawson]

I got a message back from Vercel:

For context, the not-found components are Server Components by default and they are rendered on the server and included in every page. This allows them to then be rendered on the client in case a client-side navigation leads to a 404. This is to say that the behaviour you're seeing is by design and expected. We acknowledge this isn't optimal given the runtime logs that can be thrown as a result. Our Next.js engineers are looking into how this can be improved.

[corbin-mosher]

😭😭😭

I would much rather just have it load the RSC at runtime of the client-side 404. Rather than sacrifice compute on every non-edge case like standard page loads.

"Behavior by design" is always an interesting way to describe something abnormal like this. When in reality it is behavior due to a technical constraint that was circumnavigated rather than overcome to speed up delivery most likely. AKA, a technical compromise.

Oh well, at least that is enough context to set aside any hope I had here and move on to my own solutions, like ensuring the 404 page is a dynamically loaded client-side component.

If I could rewind the clock, I would have either stuck with the pages directory and just embraced a custom loader pattern, or moved frameworks entirely. So many struggles like this plague an app dir migration.

[richardtaylordawson]

Yeah the hope is people really aren't ever hitting your 404 page, and if they do, I'm also willing to just sacrifice running that during runtime. If the performance takes a hit I don't really care because its the 404 page haha

[lluz]

I got a message back from Vercel:

For context, the not-found components are Server Components by default and they are rendered on the server and included in every page. This allows them to then be rendered on the client in case a client-side navigation leads to a 404. This is to say that the behaviour you're seeing is by design and expected. We acknowledge this isn't optimal given the runtime logs that can be thrown as a result. Our Next.js engineers are looking into how this can be improved.

Just wanted to reinforce that, in my opinion, as is, this completely limits what can be made out of the 'not-found.tsx' page. If you can't do dedicated server side fetches on that page, because you don't want them invoked on the rendering of every regular 'found' page, then it can practically only have its content designed as, e.g.: a simple message plus a link to the root page.

I really can't grasp why this 404 server component is included in every page without a differenctiation between:

• when it is coming in a preventive way, to render 'in case a client-side navigation leads to a 404';
• when it is actually the product of a raw server side detected 404 occurrence;

If this distinction was able to be read inside the 'not-found.tsx' page, then at least we could conditionally trigger whatever we want to do only 'when it is actually the product of a raw server side detected 404 occurrence'.

As is, 'not-found.tsx' is a very unsophisticated component.

[nOji]

Since we can't have nested not-found.tsx file under segmented [lang] route used for Intl, I also have to do some cookies/headers processing in the not-found component to get the correct language. Realizing that logic runs on every dynamic route has been quite frustrating.

So basically from what I understand this is a case of micro-optimizing the framework so users can get to the 404 page as fast as possible? Come on 🤦‍♂️

[achandansoni]

any workaround to disable the pre rendering?

[achandansoni]

can we cache this or ISR?

[misingnoglic]

Is there any way to tell which 404 pages are rendered based on the pre-rendering versus actually requested by a call to notFound()? This optimization causes quite a lot of headache on our end, and would be great to disable it in general.