I've been trying to use the pattern stated on react docs (https://react.dev/reference/react/use#streaming-data-from-server-to-client) and also next docs (https://nextjs.org/docs/app/getting-started/fetching-data#client-components), to start promises on the server and pass as prop to client components resolve.

The issue is that it just block render, so I'm not sure if I understood how to achieve this without blocking render on the server.

page.tsx

import { Suspense } from 'react'

import PromiseTest from '@/components/PromiseTest'

export default function Page() {
  const promise = fetch('https://httpbin.org/delay/5').then((res) => res.json())

  return (
    <div>
      <Suspense fallback={<p>loading...</p>}>
        <PromiseTest promise={promise} />
      </Suspense>
    </div>
  )
}

PromiseTest.tsx

'use client'

import { use } from 'react'

export default function PromiseTest({ promise }: { promise: Promise<any> }) {
  const test = use(promise)
  return <div>PromiseTest</div>
}

"next": "16.0.1"
"react": "19.2.0"