Progressive Form Handling
Forms are a natural interface for server mutations. Instead of writing a client-side fetch request for every form, an action can be attached to the form submission.
This approach can work even before extensive client-side JavaScript is required. Interactive enhancements can then be layered on top.
Form Using an Action
import { createComment } from './actions';
export default function CommentForm() {
return (
<form action={createComment}>
<textarea name='text' required />
<button type='submit'>Post comment</button>
</form>
);
}💡 The browser submits the form to the server-side action.
Key Takeaways
- Forms provide a simple mutation interface.
- Use meaningful
nameattributes so FormData contains expected fields. - Client-side validation can improve UX but must not replace server validation.