import {Suspense} from "react"
type Props = {
params: Promise<{joblistingId: string }>
}
export default function JoblistingPage(props: Props) {
return (
<Suspense>
<SuspendedPage (...props) />
</Suspense>
)
}
async function SuspendedPage({params}: Props) {
const {jobListingId} = await params
const joblisting = await getJoblisting(joblistingId)
}
in this we are awaiting params which are promise.why it is passed down as promise?
Not sure if I correctly understand your question, but params was already defined as a promise to begin with, thus no matter if you drill it down to the next component or not, it's still going to be a promise. (Regardless of whether you use Suspense or not.)
Next.js 15+ makes params a Promise so the page can render and stream immediately without waiting for the dynamic segment to resolve.
You pass the unresolved Promise down and wrap the child in <Suspense> because:
The parent stays synchronous → starts streaming right away.
The child (async SuspendedPage) does await params → suspends safely.
React shows the Suspense fallback until the promise resolves, then streams in the real content.
That’s how Next.js achieves non-blocking, progressive rendering instead of waiting for everything upfront.
