Server Actions

Next.Js just released the new stable app directory and with it a new alpha feature called server actions. Server actions allow data mutations on the server side. This results in a smaller JavaScript bundle shipped to the client which means our application will be faster.

Creating Server Actions

Server actions can be created by defining an async function (all server actions must be async) and declaring the 'use server' directive. The directive can be declared either inside the function or at the top of the file.

Invoking Server Actions

Server actions can be invoked using action, formAction, and startTransition.

Action

The first way of invoking a server action is to pass it as a parameter to the 'action' prop in a form element. The action will then be executed once the form is submitted.

FormAction

Form actions can be used to handle elements of type button and input by passing in the 'formAction' prop along with a server function as a parameter. It is important to note that formAction takes a higher priority over 'action'.

StartTransition

StartTransition is a function provided by the 'useTransition' hook. This method allows the user to execute a server function directly on the client.

However, if no server-mutations are being performed, the server function can be passed as a prop into the client.