diff --git a/package.json b/package.json
index 867a9d10d3f91..1222cc1ae11a3 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "@next/swc": "workspace:*",
     "@next/third-parties": "workspace:*",
     "@opentelemetry/api": "1.4.1",
+    "@picocss/pico": "1.5.10",
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.3.55",
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 4567619a07192..851634a17edfc 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -401,12 +401,10 @@ export async function renderToHTMLOrFlight(
     const createComponentAndStyles = async ({
       filePath,
       getComponent,
-      shouldPreload,
       injectedCSS,
     }: {
       filePath: string
       getComponent: () => any
-      shouldPreload?: boolean
       injectedCSS: Set<string>
     }): Promise<any> => {
       const cssHrefs = getCssInlinedLinkTags(
@@ -433,11 +431,8 @@ export async function renderToHTMLOrFlight(
             // During HMR, it's critical to use different `precedence` values
             // for different stylesheets, so their order will be kept.
             // https://github.com/facebook/react/pull/25060
-            const precedence = shouldPreload
-              ? process.env.NODE_ENV === 'development'
-                ? 'next_' + href
-                : 'next'
-              : undefined
+            const precedence =
+              process.env.NODE_ENV === 'development' ? 'next_' + href : 'next'
 
             return (
               <link
@@ -614,7 +609,6 @@ export async function renderToHTMLOrFlight(
         ? await createComponentAndStyles({
             filePath: template[1],
             getComponent: template[0],
-            shouldPreload: true,
             injectedCSS: injectedCSSWithCurrentLayout,
           })
         : [React.Fragment]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3fb30731f7c2b..2aafd1e469f05 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       '@opentelemetry/api':
         specifier: 1.4.1
         version: 1.4.1
+      '@picocss/pico':
+        specifier: 1.5.10
+        version: 1.5.10
       '@svgr/webpack':
         specifier: 5.5.0
         version: 5.5.0
@@ -7292,6 +7295,10 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /@picocss/pico@1.5.10:
+    resolution: {integrity: sha512-+LafMsrwPxXQMk6sI///TmSInCwwZmq+K7SikyL3N/4GhhwzyPC+TQLUEqmrLyjluR+uIpFFcqjty30Rtr6GxQ==}
+    dev: true
+
   /@pkgr/utils@2.3.1:
     resolution: {integrity: sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index 457d9790c3ac0..4b160a299c897 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -175,11 +175,11 @@ createNextDescribe(
 
       describe('special entries', () => {
         it('should include css imported in loading.js', async () => {
-          const html = await next.render('/loading-bug/hi')
-          // The link tag should be included together with loading
-          expect(html).toMatch(
-            /<link rel="stylesheet" href="(.+)\.css(\?v=\d+)?"\/><h2>Loading...<\/h2>/
-          )
+          const $ = await next.render$('/loading-bug/hi')
+          // The link tag should be hoist into head with precedence properties
+          expect($('head link[data-precedence]').length).toBe(2)
+
+          expect($('body h2').text()).toBe('Loading...')
         })
 
         it('should include css imported in client template.js', async () => {
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/layout.js b/test/e2e/app-dir/not-found/css-precedence/app/layout.js
new file mode 100644
index 0000000000000..750eb927b1980
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/not-found.js b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
new file mode 100644
index 0000000000000..16864ac3a1600
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
@@ -0,0 +1,23 @@
+'use client'
+
+import { Button } from '../components/button/button'
+import { useRouter } from 'next/navigation'
+
+function NotFound() {
+  const router = useRouter()
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <Button
+        id="go-to-index"
+        onClick={() => {
+          router.push('/')
+        }}
+      >
+        Home
+      </Button>
+    </div>
+  )
+}
+
+export default NotFound
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/page.js b/test/e2e/app-dir/not-found/css-precedence/app/page.js
new file mode 100644
index 0000000000000..c72c992530b43
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/app/page.js
@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { Button } from '../components/button/button'
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <Button
+        id="go-to-404"
+        onClick={() => {
+          router.push('/404')
+        }}
+      >
+        Not Found
+      </Button>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/not-found/css-precedence/components/button/button.js b/test/e2e/app-dir/not-found/css-precedence/components/button/button.js
new file mode 100644
index 0000000000000..0873c1e83eab5
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/components/button/button.js
@@ -0,0 +1,12 @@
+'use client'
+
+import styles from './button.module.css'
+import React from 'react'
+
+export const Button = ({ children, ...props }) => {
+  return (
+    <button {...props} className={styles.button}>
+      {children}
+    </button>
+  )
+}
diff --git a/test/e2e/app-dir/not-found/css-precedence/components/button/button.module.css b/test/e2e/app-dir/not-found/css-precedence/components/button/button.module.css
new file mode 100644
index 0000000000000..05ee13da1c75f
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/components/button/button.module.css
@@ -0,0 +1,7 @@
+.button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: rgb(0, 128, 0);
+  color: #fff;
+  padding: 8px 16px;
+}
diff --git a/test/e2e/app-dir/not-found/css-precedence/components/navigate-404-section.js b/test/e2e/app-dir/not-found/css-precedence/components/navigate-404-section.js
new file mode 100644
index 0000000000000..dfd54f0eb8ac8
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/components/navigate-404-section.js
@@ -0,0 +1,20 @@
+'use client'
+
+import { Button } from './button/button'
+import { useRouter } from 'next/navigation'
+
+export default function Navigate404Section() {
+  const router = useRouter()
+  return (
+    <p>
+      <Button
+        id="go-to-navigate-404"
+        onClick={() => {
+          router.push('/navigate-404')
+        }}
+      >
+        Go to /navigate-404
+      </Button>
+    </p>
+  )
+}
diff --git a/test/e2e/app-dir/not-found/css-precedence/index.test.ts b/test/e2e/app-dir/not-found/css-precedence/index.test.ts
new file mode 100644
index 0000000000000..7c3bb44b00498
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/index.test.ts
@@ -0,0 +1,43 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'app dir css',
+  {
+    files: __dirname,
+    skipDeployment: true,
+    dependencies: {
+      sass: 'latest',
+    },
+  },
+  ({ next }) => {
+    it('should load css while navigation between not-found and page', async () => {
+      const browser = await next.browser('/')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-404')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+      await browser.elementByCss('#go-to-404').click()
+      await browser.waitForElementByCss('#go-to-index')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-index')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+      await browser.elementByCss('#go-to-index').click()
+      await browser.waitForElementByCss('#go-to-404')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-404')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+    })
+  }
+)