StreamableUI Components Delay Page Redirect in Server Action

[DaniloTrotta]

Description

I am encountering an issue with a form that has a server action. Within this server action, there are database creations and at the end, I have implemented a redirect to '/posts/{post.id}.'

The problem arises when I use StreamableUI Components on the "/post/post.id" page. The redirect only executes after the streaming is complete and the content has been generated.

What I expect to happen is that the redirect should enable immediate navigation to the page, allowing me to view loading skeletons while the UI components are being streamed in as the content arrives.

Interestingly, this expected behavior is observed when I run the code locally using NextJS version 14.2.0-cannary-0. However, when the code is deployed on Vercel, the issue described above occurs.

Moreover, when I use Nextjs 14.1, the expected behavior is not observed even in the local environment.

Code example

Root Page:

 <form
  className="flex flex-col gap-2 w-full   py-2"
  action={async (formData: FormData) => {
    'use server'
// some server code, db creates ect. 
  
    redirect(`/advice/${advice.id}`)
  }}
>
  <AdviceInputField />
</form>

Post/post.id Page only needs to have a component that does a render() call:

const ui = render({
    model: 'gpt-4-turbo',
    provider: openai,
    // You may want to construct messages from your AI state
    messages: [
      { role: 'system', content: 'You are a flight assistant' },
      { role: 'user', content: userInput }
    ],
  })

return <>{ui}</>

This is enough, the redirect only executes when the llm has answered completely. However, navigating to the page directly works as intended (Skeleton shown, ui streams in when llm answered ect.)
There seems to be something wrong with the redirect itself.

Additional context

No response