String event handler in React Server Components (client-side form validation in a Server Component)

[eric-burel]

Hi, I've been asked a quite interesting question: in a React Server Component, in theory it should be possible to use JavaScript event handler without having to move to a Client Component. For instance, in a form:

return (
<form onSubmit={(e) => { 
  const data = new FormData(e.target)
  if (!data.get("foo)") { console.log("can't get foo") }
  fetch("/api/submit", { method: "POST", body: JSON.stringify({ foo: data.get("foo") }) )
}}>

This example is simplified but basically relevant for client-side validation.
It will raise the following error:

error - Error: Event handlers cannot be passed to Client Component props.
  <form onSubmit={function} action=... className=... children=...>
                 ^^^^^^^^^^

However, I don't completely understand why this is not possible. I suspect this is mostly a matter of serializing the function to pass it the client, am I right? Because there is no reason to involve client-side React here, so technically this function could work client-side, without needing to use a Client Component.

Can we expect this to become possible in the future, in order to be able to implement form validation in RSC? Also, is there an escape-hatch that could allow us to pass a string event handler as we can do in HTML?

cc @ArtyMaury

[eric-burel]

Interleaving seems to be an interesting alternative:

• define a Client Component "Form" with the event handler, and let it render its children
• pass the inputs as children to Form in a parent server component
  https://beta.nextjs.org/docs/rendering/fundamentals#component-level-client-and-server-rendering

[jdamon96]

Also running into this error currently. Exploring the interleaving option but I'm a bit surprised this use-case requires this extent of customization -- isn't form submission 90% of web-page interactivity?

[jdamon96]

I'm unable to define my event handler inside the Client Component as its an async.

What patterns are other devs using w/ Next13 server / client components for forms which have async submission functions?

[leandro-n-ortiz]

Now, NextJS has it own way of handling form validation in the server and displaying it in the client by using new React's hooks, such as useActionState.

https://nextjs.org/docs/app/guides/forms