Dynamic imports are not prefetched

[dwbruhn]

Run next info (available from version 12.0.8 and up)

/bin/sh: yarn: command not found
/bin/sh: pnpm: command not found

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 19.6.0: Sun Nov 14 19:58:51 PST 2021; root:xnu-6153.141.50~1/RELEASE_X86_64
    Binaries:
      Node: 14.18.1
      npm: 6.14.15
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.0.11-canary.4
      react: 17.0.2
      react-dom: 17.0.2

What version of Next.js are you using?

12.0.11-canary.4

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

(See the code here: https://github.com/dwbruhn/nextjs-dynamic)

When a component is dynamically imported (using next/dynamic):

import dynamic from 'next/dynamic';
const DynamicEmailComponent = dynamic(() => import('../components/Email'))

...and configured to be omitted from the render until some client side state change:

{checked && <DynamicEmailComponent />}

...the javascript chunk for that component is not loaded until the actual state change.

In the gif below, the 638.87d211e4fb0fac8e.js file is not requested until the user clicks the checkbox for the first time:

Expected Behavior

I would have expected the initial page html to include a <link rel="prefetch" ...> tag to prefetch the js chunk for the dynamic component. In that case, when the user clicks the checkbox, the chunk would already have been loaded (if the browser decided to honor the prefetch request).

(Since Next.js prefetches links to pages, I would expect it to also prefetch dynamic imports within a single page, which is why I decided to file this as a bug. But if it's actually a feature request, feel free to categorize it!)

To Reproduce

Install and run the app here in production mode, then click on the checkbox:

https://github.com/dwbruhn/nextjs-dynamic

[raRaRa]

Same issue here. I encountered it with PrismicIO because they dynamically import all slices.

[gavrilikhin-d]

Same