404 Status code but page content visible

[marco910]

Summary

Hi community,

On my Next.js website, I'm experiencing a strange issue where I can't figure out what it is caused by.

There are several dynamic routes in the app router which return cached content (using fetch) and then render a page. Some part of the page are server components and others are client components, but all pages run using the app router. After a while in production, some pages return a 404 error but still display the page content as normal. After refreshing the page for a while, the cached content expires and the page gets refreshed. But the 404 status coded stays in place. Only after a complete rebuild using npm run build the error disappears. After a few hours or days, it keeps coming along again on other pages.

I can't see any reason what could cause that issue. Has someone of you guys experienced a similar issue or knows how to fix or debug that?

Additional information

Operating System:
  Platform: linux
  Arch: x64
  Version: #109-Ubuntu SMP Wed Jan 12 16:49:16 UTC 2022
  Available memory (MB): 15632
  Available CPU cores: 4
Binaries:
  Node: 20.15.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Example

No response

[muhkuh2005]

I have encountered that problem too. Same situation about fetching data while using server- and clientside components.
A quicker way to clear out that problem until it occurs again is to remove the cached data for that particular page or all at once:

find .next/server/app -maxdepth 1 -type f -regextype posix-extended -regex ".*/index.*(html|meta|rsc)$" -delete
Following that you should restart your nextjs process, when using PM2 a reload is working just fine and gives a 0-Downtime:
pm2 reload nextjs

Not a solution, but a tribue for the cookie monster! :)