Here you will learn how to use a form button in React to trigger a server action in a Server Component without any form fields or form data. This can be useful if you want to trigger a server action with a button click, but donât want to use a Client Component to assign a click event handler.
We will start with a React component that displays a post and a button to delete it. The PostItem component receives a post object as a prop and displays the post title and a delete button:
In a Client Component, you could attach a click handler to the button to call the server with an API request. In Next.js the API could be implemented with a Route Handler:
However, in a Server Component, you cannot attach a click handler to the button like in the code above. You may get a similar error to the following:
So you are free to transform a Server Component to a Client Component with a client directive (read: "use client"; ), but if you want to keep the component as a Server Component, you can also use a form button to trigger a server action without using a Client Component.
If you want to keep it as a Server Component, you can use a form button to trigger a server action which runs on the server-side. The form button will submit the form and trigger the server action without any form fields or form data. Here is how you can do it:
Essentially you are just using a form without any form fields and only a submit button. For developers from the old days this may be obvious, but when you are only used to perform client-side interactions with React, using a form with just a button may be new to you, because you have been used to use a button with an onClick handler for a long time.
You can find the repository for this tutorial over here . If you want to go beyond this, check out âThe Road to Nextâ and get on the waitlist!