Next.js suspense server-side doesn't work

[davidemiselli]

Summary

I'm encountering an issue with Next.js 14. I want to load an Async component in the Page component. In the component, I simulate a server delay of 5 seconds. However, what happens is that I end up waiting for 5 seconds for the entire page to load, not just the component

Page component: app/page.tsx

import { Suspense } from "react";
import ItemList from "./ItemList";

export default async function Page() {
  return (
    <main>
      Hello Sample Page!
      <div>
        <Suspense fallback={"Loading..."}>
          <ItemList />
        </Suspense>
      </div>
    </main>
  )
}

ItemList component: app/ItemList.tsx

export default async function ItemList() {

  await new Promise(resolve => setTimeout(resolve, 5000))

  const items = [
    { id: "test-1", name: "chocolate" },
    { id: "test-2", name: "rice ball" },
  ]

  return (
    <ul>
      {items.map(item =>
        <li key={item.id}>
          {item.name}
        </li>
      )}
    </ul>
  )
}

Additionally, after running npm run build, with npm run start the page rendering is immediate and complete; there's not even any waiting time for the Promise anymore...
Can I get some guidance on how to preload the Page and then load the afterward? Preferably without resorting to the client-side

Additional information

No response

Example

No response

[codingroom928]

found any solution? it's still not working