Redirect support in Server Functions for form actions

[nilsbunger]

Which project does this relate to?

Start

Describe the bug

When using a server function as a form action and throwing a redirect:

export const handleForm = createServerFn({
  method: "GET",
}).handler(async (ctx) => {
  throw redirect({ to: "/" })
})

// Usage
<form action={handleForm.url}>
  {/* form fields */}
</form>

after submitting the form, the user gets a page with the URL of the server action, and this content:

{"to":"/","isRedirect":true,"statusCode":307,"reloadDocument":false}

This action handler syntax comes from Tanstack Form's guide for integrating with Start.

Expected behavior

The server ideally would respond with a proper 302/307 redirect status when using throw redirect() in the server action in this case, similar to the behavior if it was wrapped with useServerFn().

Platform

• OS: macOS
• Browser: Chrome

Additional context

Workaround

Manually throwing a raw Response in the server function works, but loses type safety:

throw new Response("ok", { status: 302, headers: { Location: "/" } })

This workaround also can't distinguish between how the server function was called, so it causes an unnecessary server re-render if it was called from a JS client.

@schiller-manuel asked me to write this bug report based on this discord thread.

[frenzzy]

Setting up multiple headers does not work either:

const headers = new Headers()
headers.append('x-example', 'a')
headers.append('x-example', 'b')
redirect({ to: '/', headers }) // no response headers
redirect({ to: '/', headers: { 'x-example': 'c' } }) // works

Issue: #4038

[schiller-manuel]

@frenzzy this seems to be a different issue. please create a new issue including a complete minimal example.

[schiller-manuel]

this has been implemented