There is no Suspense boundary in next/dynamic

[duannx]

Summary

Hi, I tried to understand the behavior of next/dynamic. According to the documentation, it uses Suspense and React.lazy under the hood. However, when I inspected the components using the React DevTools, I couldn't find any Suspense. I tested this with both [email protected] and [email protected] (page router). All I could see was a LoadableComponent.

const Test = dynamic(import('@/components/Test'))

The reason I asked this is that I am facing a hydration error when using next/dynamic. However, the error disappears when I use React.lazy with Suspense.

Thanks in advance!

Additional information

No response

Example

No response

[icyJoseph]

uhh the docs have not been properly updated!

• Remove extra suspense boundary for default next/dynamic #67014

It was listed here, https://nextjs.org/blog/next-15-rc2#other-changes:

• [Breaking] next/dynamic: the deprecated suspense prop has been removed and when the component is used in the App Router, it won't insert an empty Suspense boundary anymore (PR)
• [Breaking] Disallow using ssr: false option with next/dynamic in Server Components (PR)

I'll try to make a PR to update the docs for App Router.

[icyJoseph]

Did you use the suspense prop? Since this is a bit unexpected, I won't make any assumptions

[duannx]

I didn’t. I tested it on a fresh project created with npx create-next-app@13 ([email protected]) and got the same behavior.

const ComponentA = dynamic(() => import("@/components/ComponentA"));
const ComponentB = dynamic(() => import("@/components/ComponentB"), {
  suspense: true,
});
const ComponentC = dynamic(() => import("@/components/ComponentC"), {
  suspense: false,
});

[icyJoseph]

Ok, could you try also adding a loading option?

const ComponentB = dynamic(() => import("@/components/ComponentB"), {
  suspense: true,
  loading: () => <p>loading...</p>
});

[duannx]

I added the loading option, but it still shows the same behavior.

const ComponentA = dynamic(() => import("@/components/ComponentA"), {
  loading: () => <p>loading...</p>
});
const ComponentB = dynamic(() => import("@/components/ComponentB"), {
  suspense: true,
  loading: () => <p>loading...</p>
});
const ComponentC = dynamic(() => import("@/components/ComponentC"), {
  suspense: false,
  loading: () => <p>loading...</p>
});

---

I even added a delay function to force the loading component to show, but there’s still no Suspense.

function delay(ms: number) {
  if (typeof window === "undefined") return;
  return new Promise((res) => {
    setTimeout(res, ms);
  });
}

const ComponentA = dynamic(
  async () => {
    await delay(100000);
    return await import("@/components/ComponentA");
  },
  {
    loading: () => <p>loading...</p>,
  }
);
const ComponentB = dynamic(
  async () => {
    await delay(100000);
    return await import("@/components/ComponentB");
  },
  {
    suspense: true,
    loading: () => <p>loading...</p>,
  }
);
const ComponentC = dynamic(
  async () => {
    await delay(100000);
    return await import("@/components/ComponentC");
  },
  {
    suspense: false,
    loading: () => <p>loading...</p>,
  }
);

[duannx]

@icyJoseph Do you have any idea about this?