Repository: next.js
Issue: 404 page isn't server rendered when using notFound()
Labels: bug,Navigation

### Link to the code that reproduces this issue

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

### To Reproduce

1. Create a new project using `npx create-next-app@latest`
2. Create a page that uses the `notFound()` function.
3. Go to that page and see the response in dev tools - Here the Body is only scripts (Client rendered)
4. 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`: 
```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`
![image](https://github.com/vercel/next.js/assets/24605285/30490e28-92cf-4c4d-b174-6f2f099c5a84)

> `localhost:3000/my-page`
![image](https://github.com/vercel/next.js/assets/24605285/38940c48-37de-4e69-8f44-4e10dfde70da)

> `localhost:3000/dynamic/test`
![image](https://github.com/vercel/next.js/assets/24605285/6e9c8c0b-c18a-4f14-b01f-b69943fb0ac0)

> `localhost:3000/dynamic/my-page`
![image](https://github.com/vercel/next.js/assets/24605285/f5482248-a30e-47dd-b35a-1392a0570784)

All pages returns a `404` status code

### Production build (`next build && next start`)
![image](https://github.com/vercel/next.js/assets/24605285/57e33aaf-15d5-4ee2-8a15-85d4f6b0caf3)

> `localhost:3000/test`
![image](https://github.com/vercel/next.js/assets/24605285/619acce8-1642-45bd-9f07-7fbe2021cd47)

> `localhost:3000/my-page`
![image](https://github.com/vercel/next.js/assets/24605285/c2c4277a-3385-4768-aae9-90bc99c68cd2)

> `localhost:3000/dynamic/test`
![image](https://github.com/vercel/next.js/assets/24605285/1075b670-732c-4e8c-a284-dfaf0fc37bdc)

> `localhost:3000/dynamic/my-page`
![image](https://github.com/vercel/next.js/assets/24605285/3bde5a6e-1776-4bdb-83fe-0edbbbc4469c)

> The static page `localhost:3000/my-page` returns status code 200
![image](https://github.com/vercel/next.js/assets/24605285/80c4a098-38dc-4539-b231-dc2b6e2c9bf0)

### The rendered result for all requests are the default not found page:
![image](https://github.com/vercel/next.js/assets/24605285/eb2ff9d0-df3c-45e8-8963-cb0b7a4ef7af)





### Provide environment information

```bash
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](https://github.com/expatfile/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

![image](https://github.com/vercel/next.js/assets/24605285/8e954a1a-5b28-460f-a7a8-410adde197f2)

> Captured in development where no 404 page is server rendered but it's the same behavior when using `next start`