ignore preload when suspense is set to true

Author: huozhi

docs/advanced-features/dynamic-import.md

@@ -180,5 +180,5 @@ function Home() {
 export default Home
 ```
 
-If you're using `suspense: true`, `ssr` option will set to `true` to delegate rendering to React `<Suspense />`.
-It's similar to using `React.lazy`, but `next/dynamic` will support mode like SSG.
+If you set option `suspense` to true, both option `ssr` and `loading` will be omitted, delegating rendering control to React `<Suspense />`.
+It's similar to using `React.lazy` directly, but `next/dynamic` will support mode like CSR and SSG.

packages/next/shared/lib/dynamic.tsx

@@ -124,15 +124,15 @@ export default function dynamic<P = {}>(
     }
     loadableOptions.suspense = false
   }
+
+  const { suspense, loader } = loadableOptions
   // If suspense is enabled, delegate rendering to suspense
-  if (loadableOptions.suspense) {
-    loadableOptions.ssr = true
+  if (suspense) {
+    delete loadableOptions.loadableGenerated
+    delete loadableOptions.loading
+    delete loadableOptions.ssr
   }
 
-  const { suspense, ssr, loader, loadableGenerated } = loadableOptions
-  delete loadableOptions.ssr
-  delete loadableOptions.loadableGenerated
-
   if (typeof loadableOptions.loader === 'function' && suspense) {
     loadableOptions.loader = React.lazy(
       loader as () => Promise<{
@@ -142,15 +142,15 @@ export default function dynamic<P = {}>(
   }
 
   // coming from build/babel/plugins/react-loadable-plugin.js
-  if (loadableGenerated) {
+  if (loadableOptions.loadableGenerated) {
     loadableOptions = {
       ...loadableOptions,
-      ...loadableGenerated,
+      ...loadableOptions.loadableGenerated,
     }
   }
 
   // support for disabling server side rendering, eg: dynamic(import('../hello-world'), {ssr: false})
-  if (ssr === false && !suspense) {
+  if (loadableOptions.ssr === false && !suspense) {
     return noSSR(loadableFn, loadableOptions)
   }
 

packages/next/shared/lib/loadable.js

@@ -72,7 +72,6 @@ function createLoadableComponent(loadFn, options) {
   )
 
   let subscription = null
-
   function init() {
     if (opts.suspense) {
       return Promise.resolve()
@@ -152,7 +151,6 @@ function createLoadableComponent(loadFn, options) {
   }
 
   function LazyImpl(props, ref) {
-    useDynamicModules(opts.modules)
     return React.createElement(opts.loader, { ...props, ref })
   }
 

test/integration/react-18/prerelease/components/bar.js

@@ -0,0 +1,21 @@
+import { Suspense } from 'react'
+import dynamic from 'next/dynamic'
+
+const Foo = dynamic(() => import('./foo'), {
+  suspense: true,
+  loadableGenerated: {
+    modules: ['./foo'],
+    webpack: [require.resolveWeak('./foo')],
+  },
+})
+
+export default function Bar() {
+  return (
+    <div>
+      bar
+      <Suspense fallback={'oof'}>
+        <Foo />
+      </Suspense>
+    </div>
+  )
+}

test/integration/react-18/prerelease/components/foo.js

@@ -0,0 +1,3 @@
+export default function Foo() {
+  return 'foo'
+}

test/integration/react-18/prerelease/package.json

@@ -1,4 +1,10 @@
 {
+  "scripts": {
+    "next": "node -r ../test/require-hook.js ../../../../packages/next/dist/bin/next",
+    "dev": "yarn next dev",
+    "build": "yarn next build",
+    "start": "yarn next start"
+  },
   "dependencies": {
     "react": "*",
     "react-dom": "*"

test/integration/react-18/prerelease/pages/suspense/no-preload.js

@@ -0,0 +1,18 @@
+import { Suspense } from 'react'
+import dynamic from 'next/dynamic'
+
+const Bar = dynamic(() => import('../../components/bar'), {
+  suspense: true,
+  loadableGenerated: {
+    modules: ['../../components/bar'],
+    webpack: [require.resolveWeak('../../components/bar')],
+  },
+})
+
+export default function NoPreload() {
+  return (
+    <Suspense fallback={'rab'}>
+      <Bar />
+    </Suspense>
+  )
+}

test/integration/react-18/test/dynamic.js

@@ -8,7 +8,7 @@ import { File } from 'next-test-utils'
 const appDir = join(__dirname, '../prerelease')
 const page = new File(join(appDir, 'components/dynamic-suspense.js'))
 
-function writeComponent({ ssr = false, suspense = false }) {
+function writeDynamicTestComponent({ ssr = false, suspense = false }) {
   const content = `import { Suspense } from 'react'
   import dynamic from 'next/dynamic'
 
@@ -36,7 +36,7 @@ export default (context, render) => {
   describe('suspense:true option', () => {
     describe('promise is thrown on server side', () => {
       // let `ssr` option be auto overridden
-      beforeAll(() => writeComponent({ suspense: true }))
+      beforeAll(() => writeDynamicTestComponent({ suspense: true }))
       afterAll(() => page.restore())
 
       it('should render the fallback on server side', async () => {
@@ -62,7 +62,6 @@ export default (context, render) => {
     })
 
     describe('promise is not thrown on server side', () => {
-      afterAll(() => page.restore())
       it('should render fallback on server side', async () => {
         const $ = await get$('/suspense/no-thrown')
         const text = $('#__next').text()
@@ -84,7 +83,7 @@ export default (context, render) => {
   })
 
   describe('suspense:false option', () => {
-    beforeAll(() => writeComponent({ suspense: false, ssr: false }))
+    beforeAll(() => writeDynamicTestComponent({ suspense: false, ssr: false }))
     afterAll(() => page.restore())
 
     it('should render nothing on server side', async () => {

test/integration/react-18/test/index.test.js

@@ -3,6 +3,7 @@
 import { join } from 'path'
 import fs from 'fs-extra'
 import webdriver from 'next-webdriver'
+import cheerio from 'cheerio'
 import {
   File,
   findPort,
@@ -124,13 +125,23 @@ describe('React 18 basics', () => {
     expect(await browser.elementById('react-dom-version').text()).toMatch(/18/)
   })
 
-  it('SSG works for suspense', async () => {
+  it('should works with suspense in ssg', async () => {
     const res1 = await fetchViaHTTP(context.appPort, '/suspense/thrown')
     const res2 = await fetchViaHTTP(context.appPort, '/suspense/no-thrown')
 
     expect(res1.status).toBe(200)
     expect(res2.status).toBe(200)
   })
+
+  it('should not preload modules on server side', async () => {
+    const html = await renderViaHTTP(context.appPort, '/suspense/no-preload')
+    const $ = cheerio.load(html)
+    const nextData = JSON.parse($('#__NEXT_DATA__').text())
+    const content = $('#__next').text()
+    // <Bar> is suspended
+    expect(content).toBe('rab')
+    expect(nextData.dynamicIds).toBeUndefined()
+  })
 })
 
 describe('Dynamic import', () => {