notFound returns a 200 when loading.tsx is used

[vperrin]

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 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
Binaries:
  Node: 18.12.1
  npm: 9.4.2
  Yarn: 3.2.2
  pnpm: 7.17.0
Relevant packages:
  next: 13.1.7-canary.8
  eslint-config-next: 13.1.6
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), TypeScript

Link to the code that reproduces this issue

https://github.com/vperrin/404-not-working-with-loading

To Reproduce

start the server
make an api call to localhost:3000/ (the call returns a 200 even though a notFound() is used)
remove loading.tsx from the root directory
make an api call to localhost:3000/ (the call returns a 404)

Describe the Bug

When notFound() is used in combination with loading.tsx, an 200 is returned instead of a 404

Expected Behavior

Even if loading.tsx is used, if a notFound() is used, a 404 should still be returned

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

yarn dev

[barikhan1986]

Any Update? i faced the same issue

[barikhan1986]

The issue is still in latest stable release v13.4.16

[lakaniemi]

Relates to #51021

This is kind of an awkward bug as removing loading.tsx will degrade user experience and there does not seem any other solution to this.

[Maxservais]

Facing the same issue here as well (using app router with nextjs 14). I have to remove loading.tsx from my root directory in /app to make sure that not-found.tsx returns a 404 and not 200.

[olegyablokov]

Does it work with <Suspense>? Because if we don't use loading.tsx we still need to show a loading page

[ztanner]

Hi - this behavior is expected and documented here: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#status-codes

When using loading.tsx, the routes that trigger the loading/Suspense boundary are no longer blocking the request to the page. This means that Next.js is immediately able to send the part outside of the loading boundary without having to wait for the slower requests.

When a response is streamed, a 200 status code is sent immediately. Once the notFound() part is streamed in, it's not possible to change the status code. However, Next.js will insert a <meta name="robots" content="noindex" /> tag, signaling to crawlers that the not found page should not be indexed.

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