SSR instead of redirect when submitting server action with JS/WASM disabled?

[sbking]

Related to #1490

Hello, I'm trying to figure out how to get progressive enhancement / graceful degradation working with an <ActionForm>

Specifically, I want the following behavior:

1. User submits form
2. Server validates the form inputs, and
3. If the form is valid, server redirects the user to another page
4. if the form is invalid, user is sent back to the same page, with error messages displayed next to invalid form inputs. Ideally, any non-sensitive form fields retain the value the user entered.

Everything works except for 4 when JS/WASM is disabled. The server action redirects the user back to the same route, but without the return value of the server action function, so users without JS enabled don't see the form input errors. Also, any form fields will now be empty, and there's no good way to get the original form values for the server rendered page.

This means that in order to properly do progressive enhancement, for every form I would need to:

• Use an extractor to check the Accept header to determine if the request was sent from WASM or a plain form submission
• If WASM was disabled, redirect back to the same route but with the results serialized into query parameters
• Use both deserialized query parameters and the create_server_action value to render the page

Additionally this now means that the form error state has to be encoded into the URL as a query param, which might not be desired. This is a lot of extra work to make progressive enhancement work, which seems to go against the goal of ActionForms:

The power of HTML, HTTP, and isomorphic rendering mean that your <ActionForm/> simply works, even with no JS/WASM.

Ideally, it would be great if no redirect was needed when JS/WASM is disabled. When posting a form to the current route, the server should SSR render the page with the result of the server function substituted as the server action value. Then the error messages will automatically be rendered alongside the form inputs, and there's no extra work to enable progressive enhancement.

This is basically the way Remix handles route actions. Is something like this possible with Leptos?

[gbj]

Sure, something like this is possible with Leptos. Remix's option also works, but limits you to only one action/server function per route.

There's not a built-in way to do what you're asking at the moment, but the options are either

1. return errors in the query string of the redirect, as you describe above, or
2. post to the route and handle errors there (see link)

There is not a progressively-enhanced version of 2. PRs or discussion in the linked issue welcome.