[breaking] 13.0.7 next/dynamic: fallback no longer rendered for client side async component using suspense: true and <Suspense fallback={...}>

[cvbuelow]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

next: 13.0.7
react: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Dynamic imports (next/dynamic)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/dynamic-with-v13-0-7-1bkhgf

To Reproduce

You may need to throttle your network speed to see the fallback loading/not loading and click reload on the sandbox browser

13.0.6 works: https://codesandbox.io/p/sandbox/dynamic-with-v13-0-6-h2iq5i
13.0.7 broken: https://codesandbox.io/p/sandbox/dynamic-with-v13-0-7-1bkhgf
13.1.4-canary.0 still broken: https://codesandbox.io/p/sandbox/dynamic-with-canary-dd9bqz

Describe the Bug

#42589 introduced a breaking change for client side only async components using suspense: true and <Suspense fallback={...}>. The fallback is no longer rendered since now next/dynamic renders its own <Suspense> block with fallback set from the loading option.

For this example the fallback is no longer rendered:

const MyAsync = dynamic(() => import("./MyAsync"), { suspense: true });
const Loading = () => 'Loading...'

const Component = () => (
  <Suspense fallback={<Loading />}>
    <MyAsync />
  </Suspense>
)

To get it to work again I'm required to change my code to use loading option with next/dynamic, or use React.lazy directly if my Loading component needs to receive props from the render flow.

Visual example

13.0.6 with fallback rendered

Screen.Recording.2023-01-20.at.1.32.25.PM.mov

13.0.7 fallback is not rendered

Screen.Recording.2023-01-20.at.1.31.03.PM.mov

Expected Behavior

I wouldn't expect there to be breaking changes when upgrading a patch version. Breaking changes should be called out in the release notes. I can work around this issue by making code changes, but ideally next/dynamic should detect if suspense: true option is set and revert to the old behavior in that case to maintain backwards compatibility.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Ivowainer]

This issue is introduced in Next.js version 13.0.7, specifically in the functionality of asynchronous components that use the "suspense: true" attribute and the component. The fallback functionality is no longer being rendered because next/dynamic is now using its own block with the fallback set from the load option. This change broke backwards compatibility and is not mentioned in the release notes. The problem can be solved by changing the code to use the loading option with next/dynamic, or by using React.lazy directly if the Loading component needs to receive properties from the render stream.

Here is an example of how to use the load option with next/dynamic to solve this problem:

import dynamic from 'next/dynamic'

const MyAsync = dynamic(() => import("./MyAsync"), {
  loading: () => <p>Loading...</p>,
});

const Component = () => (
  <div>
    <MyAsync />
  </div>
);

export default Component

In this example, the dynamic component "MyAsync" is imported using next/dynamic, and a loading component is set using the "loading" option. This way, while the "MyAsync" component is loading, it will show the load component instead.

It is important to mention that if you want to continue using the fallback functionality of React.Suspense, you will need to use the React.lazy function.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.