From 27fd91eb80b76e88ce1d3139aa74cf7a20ccec3d Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 8 May 2024 00:22:55 +0200
Subject: [PATCH 1/6] Preload all chunks

---
 .../src/shared/lib/lazy-dynamic/loadable.tsx  |  4 +-
 .../lib/lazy-dynamic/preload-chunks.tsx       | 62 +++++++++++++++++++
 .../shared/lib/lazy-dynamic/preload-css.tsx   | 47 --------------
 .../next/src/shared/lib/lazy-dynamic/types.ts |  1 -
 4 files changed, 64 insertions(+), 50 deletions(-)
 create mode 100644 packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
 delete mode 100644 packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx

diff --git a/packages/next/src/shared/lib/lazy-dynamic/loadable.tsx b/packages/next/src/shared/lib/lazy-dynamic/loadable.tsx
index 1aa448a61e366..31b6e459e93d8 100644
--- a/packages/next/src/shared/lib/lazy-dynamic/loadable.tsx
+++ b/packages/next/src/shared/lib/lazy-dynamic/loadable.tsx
@@ -1,7 +1,7 @@
 import { Suspense, lazy } from 'react'
 import { BailoutToCSR } from './dynamic-bailout-to-csr'
 import type { ComponentModule } from './types'
-import { PreloadCss } from './preload-css'
+import { PreloadChunks } from './preload-chunks'
 
 // Normalize loader to return the module as form { default: Component } for `React.lazy`.
 // Also for backward compatible since next/dynamic allows to resolve a component directly with loader
@@ -52,7 +52,7 @@ function Loadable(options: LoadableOptions) {
       <>
         {/* During SSR, we need to preload the CSS from the dynamic component to avoid flash of unstyled content */}
         {typeof window === 'undefined' ? (
-          <PreloadCss moduleIds={opts.modules} />
+          <PreloadChunks moduleIds={opts.modules} />
         ) : null}
         <Lazy {...props} />
       </>
diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
new file mode 100644
index 0000000000000..1d60e6f8c90f6
--- /dev/null
+++ b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external'
+
+export function PreloadChunks({
+  moduleIds,
+}: {
+  moduleIds: string[] | undefined
+}) {
+  // Early return in client compilation and only load requestStore on server side
+  if (typeof window !== 'undefined') {
+    return null
+  }
+
+  const requestStore = getExpectedRequestStore('next/dynamic preload')
+  const allFiles = []
+
+  // Search the current dynamic call unique key id in react loadable manifest,
+  // and find the corresponding CSS files to preload
+  if (requestStore.reactLoadableManifest && moduleIds) {
+    const manifest = requestStore.reactLoadableManifest
+    for (const key of moduleIds) {
+      if (!manifest[key]) continue
+      const chunks = manifest[key].files
+      allFiles.push(...chunks)
+    }
+  }
+
+  if (allFiles.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {allFiles.map((chunk) => {
+        const href = `${requestStore.assetPrefix}/_next/${encodeURI(chunk)}`
+        if (chunk.endsWith('.css')) {
+          return (
+            <link
+              key={chunk}
+              // @ts-ignore
+              precedence={'dynamic'}
+              rel="stylesheet"
+              href={href}
+              as="style"
+            />
+          )
+        } else {
+          return (
+            <script
+              key={chunk}
+              // @ts-ignore
+              precedence={'dynamic'}
+              src={href}
+              defer
+            />
+          )
+        }
+      })}
+    </>
+  )
+}
diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx
deleted file mode 100644
index aac260fc2b251..0000000000000
--- a/packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client'
-
-import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external'
-
-export function PreloadCss({ moduleIds }: { moduleIds: string[] | undefined }) {
-  // Early return in client compilation and only load requestStore on server side
-  if (typeof window !== 'undefined') {
-    return null
-  }
-
-  const requestStore = getExpectedRequestStore('next/dynamic css')
-  const allFiles = []
-
-  // Search the current dynamic call unique key id in react loadable manifest,
-  // and find the corresponding CSS files to preload
-  if (requestStore.reactLoadableManifest && moduleIds) {
-    const manifest = requestStore.reactLoadableManifest
-    for (const key of moduleIds) {
-      if (!manifest[key]) continue
-      const cssFiles = manifest[key].files.filter((file: string) =>
-        file.endsWith('.css')
-      )
-      allFiles.push(...cssFiles)
-    }
-  }
-
-  if (allFiles.length === 0) {
-    return null
-  }
-
-  return (
-    <>
-      {allFiles.map((file) => {
-        return (
-          <link
-            key={file}
-            // @ts-ignore
-            precedence={'dynamic'}
-            rel="stylesheet"
-            href={`${requestStore.assetPrefix}/_next/${encodeURI(file)}`}
-            as="style"
-          />
-        )
-      })}
-    </>
-  )
-}
diff --git a/packages/next/src/shared/lib/lazy-dynamic/types.ts b/packages/next/src/shared/lib/lazy-dynamic/types.ts
index ad5eb8407120d..b2a5b4f6ddfc9 100644
--- a/packages/next/src/shared/lib/lazy-dynamic/types.ts
+++ b/packages/next/src/shared/lib/lazy-dynamic/types.ts
@@ -7,7 +7,6 @@ export declare type LoaderComponent<P = {}> = Promise<
 export declare type Loader<P = {}> = () => LoaderComponent<P>
 
 export type LoadableGeneratedOptions = {
-  webpack?(): any
   modules?: string[]
 }
 

From d423096f043974f56d3ab14cac906836cd32f41c Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 8 May 2024 11:37:17 +0200
Subject: [PATCH 2/6] update preloading and tests

---
 .../lib/lazy-dynamic/preload-chunks.tsx       | 33 +++++++------------
 test/e2e/app-dir/dynamic-css/index.test.ts    |  7 ++--
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
index 1d60e6f8c90f6..f54650eb81d58 100644
--- a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
+++ b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
@@ -34,28 +34,17 @@ export function PreloadChunks({
     <>
       {allFiles.map((chunk) => {
         const href = `${requestStore.assetPrefix}/_next/${encodeURI(chunk)}`
-        if (chunk.endsWith('.css')) {
-          return (
-            <link
-              key={chunk}
-              // @ts-ignore
-              precedence={'dynamic'}
-              rel="stylesheet"
-              href={href}
-              as="style"
-            />
-          )
-        } else {
-          return (
-            <script
-              key={chunk}
-              // @ts-ignore
-              precedence={'dynamic'}
-              src={href}
-              defer
-            />
-          )
-        }
+        const isCss = chunk.endsWith('.css')
+        return (
+          <link
+            key={chunk}
+            // @ts-ignore
+            precedence={'dynamic'}
+            href={href}
+            rel={isCss ? 'stylesheet' : 'preload'}
+            as={isCss ? 'style' : 'script'}
+          />
+        )
       })}
     </>
   )
diff --git a/test/e2e/app-dir/dynamic-css/index.test.ts b/test/e2e/app-dir/dynamic-css/index.test.ts
index 94f54019fe296..a1659a0be08ce 100644
--- a/test/e2e/app-dir/dynamic-css/index.test.ts
+++ b/test/e2e/app-dir/dynamic-css/index.test.ts
@@ -11,10 +11,13 @@ describe('app dir - dynamic css', () => {
     return
   }
 
-  it('should preload css of dynamic component during SSR', async () => {
+  it('should preload all chunks of dynamic component during SSR', async () => {
     const $ = await next.render$('/ssr')
-    const cssLinks = $('link[rel="stylesheet"]')
+    const cssLinks = $('link[rel="stylesheet"][data-precedence="dynamic"]')
     expect(cssLinks.attr('href')).toContain('.css')
+
+    const preloadJsChunks = $('link[rel="preload"][precedence="dynamic"]')
+    expect(preloadJsChunks.attr('as')).toBe('script')
   })
 
   it('should only apply corresponding css for page loaded that /ssr', async () => {

From 1417ae4c9bf4bb8e59794b29d0430aea74fc047f Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 8 May 2024 15:59:51 +0200
Subject: [PATCH 3/6] set fetch priority low

---
 packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx | 2 ++
 test/e2e/app-dir/dynamic-css/index.test.ts                   | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
index f54650eb81d58..95b6b58771f29 100644
--- a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
+++ b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
@@ -43,6 +43,8 @@ export function PreloadChunks({
             href={href}
             rel={isCss ? 'stylesheet' : 'preload'}
             as={isCss ? 'style' : 'script'}
+            // only apply fetchPriority to preload script
+            {...(isCss ? undefined : { fetchPriority: 'low' })}
           />
         )
       })}
diff --git a/test/e2e/app-dir/dynamic-css/index.test.ts b/test/e2e/app-dir/dynamic-css/index.test.ts
index a1659a0be08ce..99d7334ebbee9 100644
--- a/test/e2e/app-dir/dynamic-css/index.test.ts
+++ b/test/e2e/app-dir/dynamic-css/index.test.ts
@@ -18,6 +18,7 @@ describe('app dir - dynamic css', () => {
 
     const preloadJsChunks = $('link[rel="preload"][precedence="dynamic"]')
     expect(preloadJsChunks.attr('as')).toBe('script')
+    expect(preloadJsChunks.attr('fetchPriority')).toBe('low')
   })
 
   it('should only apply corresponding css for page loaded that /ssr', async () => {

From 81e21695933c1a2967668659a5f2a6166c716325 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 8 May 2024 16:19:22 +0200
Subject: [PATCH 4/6] fix test

---
 test/e2e/app-dir/dynamic-css/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/app-dir/dynamic-css/index.test.ts b/test/e2e/app-dir/dynamic-css/index.test.ts
index 99d7334ebbee9..01bb5c4b0e11d 100644
--- a/test/e2e/app-dir/dynamic-css/index.test.ts
+++ b/test/e2e/app-dir/dynamic-css/index.test.ts
@@ -18,7 +18,7 @@ describe('app dir - dynamic css', () => {
 
     const preloadJsChunks = $('link[rel="preload"][precedence="dynamic"]')
     expect(preloadJsChunks.attr('as')).toBe('script')
-    expect(preloadJsChunks.attr('fetchPriority')).toBe('low')
+    expect(preloadJsChunks.attr('fetchpriority')).toContain(`low`)
   })
 
   it('should only apply corresponding css for page loaded that /ssr', async () => {

From 47b67e52af2be4657122a426e91132c02f24b258 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 8 May 2024 17:29:29 +0200
Subject: [PATCH 5/6] use ReactDOM.preload

---
 .../lib/lazy-dynamic/preload-chunks.tsx       | 32 ++++++++++++-------
 test/e2e/app-dir/dynamic-css/index.test.ts    |  2 +-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
index 95b6b58771f29..31b5499be49bf 100644
--- a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
+++ b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external'
+import { preload } from 'react-dom'
 
 export function PreloadChunks({
   moduleIds,
@@ -35,18 +36,25 @@ export function PreloadChunks({
       {allFiles.map((chunk) => {
         const href = `${requestStore.assetPrefix}/_next/${encodeURI(chunk)}`
         const isCss = chunk.endsWith('.css')
-        return (
-          <link
-            key={chunk}
-            // @ts-ignore
-            precedence={'dynamic'}
-            href={href}
-            rel={isCss ? 'stylesheet' : 'preload'}
-            as={isCss ? 'style' : 'script'}
-            // only apply fetchPriority to preload script
-            {...(isCss ? undefined : { fetchPriority: 'low' })}
-          />
-        )
+        // If it's stylesheet we use `precedence` o help hoist with React Float
+        if (isCss) {
+          return (
+            <link
+              key={chunk}
+              // @ts-ignore
+              precedence="dynamic"
+              href={href}
+              rel="stylesheet"
+              as="style"
+            />
+          )
+        } else {
+          // If it's script we use ReactDOM.preload to preload the resources
+          preload(href, {
+            as: 'script',
+            fetchPriority: 'low',
+          })
+        }
       })}
     </>
   )
diff --git a/test/e2e/app-dir/dynamic-css/index.test.ts b/test/e2e/app-dir/dynamic-css/index.test.ts
index 01bb5c4b0e11d..f7bf90245a746 100644
--- a/test/e2e/app-dir/dynamic-css/index.test.ts
+++ b/test/e2e/app-dir/dynamic-css/index.test.ts
@@ -16,7 +16,7 @@ describe('app dir - dynamic css', () => {
     const cssLinks = $('link[rel="stylesheet"][data-precedence="dynamic"]')
     expect(cssLinks.attr('href')).toContain('.css')
 
-    const preloadJsChunks = $('link[rel="preload"][precedence="dynamic"]')
+    const preloadJsChunks = $('link[rel="preload"]')
     expect(preloadJsChunks.attr('as')).toBe('script')
     expect(preloadJsChunks.attr('fetchpriority')).toContain(`low`)
   })

From 9106093157f7bad01a563e135c53a39684d49310 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 8 May 2024 17:41:26 +0200
Subject: [PATCH 6/6] fix lint and add comment

---
 packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
index 31b5499be49bf..dc332f8545a22 100644
--- a/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
+++ b/packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx
@@ -36,7 +36,9 @@ export function PreloadChunks({
       {allFiles.map((chunk) => {
         const href = `${requestStore.assetPrefix}/_next/${encodeURI(chunk)}`
         const isCss = chunk.endsWith('.css')
-        // If it's stylesheet we use `precedence` o help hoist with React Float
+        // If it's stylesheet we use `precedence` o help hoist with React Float.
+        // For stylesheets we actually need to render the CSS because nothing else is going to do it so it needs to be part of the component tree.
+        // The `preload` for stylesheet is not optional.
         if (isCss) {
           return (
             <link
@@ -54,6 +56,7 @@ export function PreloadChunks({
             as: 'script',
             fetchPriority: 'low',
           })
+          return null
         }
       })}
     </>