404 page isn't server rendered when using notFound()

Nobody has claimed this yet.

Link to the code that reproduces this issue

https://github.com/nikcio/nextjs-notfound-example

To Reproduce

Create a new project using npx create-next-app@latest
Create a page that uses the notFound() function.
Go to that page and see the response in dev tools - Here the Body is only scripts (Client rendered)
Go to a different page that doesn't exist and see the response in dev tools - Here the body will be rendered (Server rendered)

Example for the page.tsx:

import { notFound } from "next/navigation";

export default function Page() {
  notFound();
}

Current vs. Expected behavior

Expected

I expected that the 404 page was server rendered both when using next dev and next start. But also most importantly server rendered when triggered using the notFound() function.

Current behavior

Examples from: https://github.com/nikcio/nextjs-notfound-example

Development (`next dev`)

localhost:3000/test

localhost:3000/my-page

localhost:3000/dynamic/test

localhost:3000/dynamic/my-page

All pages returns a 404 status code

Production build (`next build && next start`)

localhost:3000/test

localhost:3000/my-page

localhost:3000/dynamic/test

localhost:3000/dynamic/my-page

The static page localhost:3000/my-page returns status code 200

The rendered result for all requests are the default not found page:

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Enterprise
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: 8.6.10
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

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

next dev (local), next start (local)

Additional context

We encountered this as an issue when using next-runtime-env that adds a <script> tag to the <head> of the page. This is a problem because when the whole page is client rendered on the not found page the script tag is added after the page is loaded and the script will never be executed without an explicit call from another component.

You can replicate this using the Script component from Next and using strategy="beforeInteractive".

I've made an example here: https://github.com/nikcio/nextjs-notfound-example/tree/example/script-in-head

Captured in development where no 404 page is server rendered but it's the same behavior when using next start

Start with the linked reproduction and its page.tsx example using notFound(), then compare the response from that route with a nonexistent route under next dev and next start. Done means the notFound() response body is server rendered in both stages and the beforeInteractive Script or next-runtime-env script in the head is handled as expected.

Written by the indexing model from the issue text.

Description

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Expected

Current behavior

Development (`next dev`)

Production build (`next build && next start`)

The rendered result for all requests are the default not found page:

Provide environment information

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

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

Additional context

Contributor guide

First steps

Research direction

Assessment

404 page isn't server rendered when using notFound()

Description

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Expected

Current behavior

Development (next dev)

Production build (next build && next start)

The rendered result for all requests are the default not found page:

Provide environment information

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

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

Additional context

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox

Development (`next dev`)

Production build (`next build && next start`)