Astro integration

[penx]

Astro recently introduced Actions where they list "a solution to client-side validation" as a non-goal as there are "several community libraries to choose from".

Astro actions take a zod schema, but I think that in order to accept a form post from the client without JavaScript, this schema needs to be flat.

Integration with react-hook-form and I think Conform is possible, but there is a trade off - either lose the non-js form-submit fallback (which is essential for non-hydrated islands and a nice feature of Conform) or use a flat zod structure.

The goals of Astro seem well aligned to those of Conform, so I think they would be a good match. I think Conform already has code to handle a non-JS fallback of a form submit for nested zod struture. It would be great to see this approach working alongside Astro actions, perhaps this requires collaborating with the Astro team @bholmesdev @ascorbic

I'm creating this discussion to see:

• has anyone else successfully integrated Astro Actions with Conform
• if this is already possible, to suggest adding an example to the conform examples
• if this is not possible, to identify and suggest work that is needed in Astro or Conform to improve integration

[edmundhung]

Hey @penx! You nerd-sniped me into putting up an Astro example in #1177 😄

After playing with it a bit more, I think the right way to think about Astro support is as a hybrid model:

• Astro renders the page and handles the action
• A hydrated React island runs Conform on the client for validation, then hands off to a normal server submission when the form is valid
• Astro.getActionResult() bridges the server result back into Conform via lastResult

It's mostly working. I just found a bug in the async validation form, but it's an issue from the Conform side. The only example I couldn't port over is "async validation via server validation", mainly because the server submission causes a document reload and the input loses focus. I think we can support that properly once Conform exposes a hook that lets user intercepts the submit event used for server validation.

[penx]

This looks great.

Looks like getActionResult/lastResult would work in a non-hydrated island? If so, I think this means you could use the same form pattern whether it is in a server-only, hydrated, or a client-only island — opting into hydration only where you need it (e.g. a login form could skip hydration entirely, while something with a date range picker may need it).

[penx]

(a reason you may want to use the same pattern for server only and hydrated forms is so you can turn on/off hydration as needed, e.g. if a form changes over time to become more or less complex)

[edmundhung]

Yep, I think that's mostly right.

The same general pattern can work across these rendering modes:

• server-only: super simple forms, e.g. contact us or login if you want to minimize the JS footprint
• hydrated: regular forms where you want both client and server validation
• client-only: rare, useful for cases where you need locale/timezone-sensitive defaults or browser APIs

The main difference is that the progressive-enhancement / no-JS story really only applies to the server-rendered and hydrated cases, while client:only is JS-required by definition. 👍🏼