async function in props of getServerSideProps

[Nithanaroy]

What version of Next.js are you using?

12

What version of Node.js are you using?

14

What browser are you using?

Chrome

What operating system are you using?

mac

How are you deploying your application?

localhost

Describe the Bug

export async function getServerSideProps() {
    return { props: async () => {
        const res = await fetch(`...`)
        const data = await res.json()
        return data
    } }
}

returns

Error: Error serializing props returned from `getServerSideProps` in "/page1".
Reason: Props must be returned as a plain object from getServerSideProps: `{ props: { ... } }` (received: `[object AsyncFunction]`).

Expected Behavior

Flush the head and wait for the data

To Reproduce

Create a component with the above getServerSideProps function that uses async function as a return value for props.

[balazsorban44]

The error message says it all. You must return JSON serializable data. A function isn't that. run that logic before the return and only return the data instead

[Nithanaroy]

How can I achieve streaming response in next.js? One approach is shown in https://youtu.be/Nl4OwNhh2QI?t=1241

[Nithanaroy]

If the above is unavailable does next.js send the response headers immediately and not wait until the below promise is resolved (for the given below case) in SSR? How can I verify this?

export async function getServerSideProps() {
    const res = await fetch(`...`)
    const data = await res.json()
    return {
        props: data
    }
}