Server actions

Server actions enable you to create custom backend logic that runs entirely on the server, unlike regular Actions, which execute in the user's browser. The closest analogy to server actions is API endpoints, which can help you understand them better.

Furthermore, server actions are hidden from the end user. This means configurations, code, and information specified in server actions are not accessible to the user and are executed and stored on the server. Only parameters sent to the action and the result of the action are accessible.

Usage

Note: Server actions are subject to Automations & Server Actions limits. For more details, please refer to the pricing page.

New server actions can be created using the plus button in the Actions panel. Once created, these actions can be assigned to a component trigger in the usual way or executed with the "Execute Action" step.

Server actions, like regular Actions, can involve multiple steps to load, send, and process data using JavaScript or Python.

Below we will create a basic server action that will accept a value from an input component and multiply its value:

• Create a server action with a JavaScript step:

• Add an input component to the page and set its value using the Params settings object of the server action:

• Update the JavaScript step code to return the newly configured parameters, enter some number, execute action and check the result:

• Next, let's add an additional step to multiply the value of the input:

• Finally, let's add a button to execute the action and a text component to display the result:

That's it! Now we have a functioning server action fully executed on the server.

Differences between client side Actions and Server Actions

When choosing between server and client-side actions, developers should consider the following differences:

• Server actions are executed on server and have no direct access to ui components or page elements, such as document or window.

• Server actions are hidden from the end user, allowing permissions and user-based logic to be securely handled without user interference.

• The {{user}} variable is securely defined on the server side based on the current user's authentication, ensuring it cannot be falsified by the end user.

• Server actions cannot reference required components or other actions in steps. All required values must be specified under the Request tab in the Params object.

• Server actions cannot access UI element methods, so calling {{ui.modal.open}} from server actions is not possible.

• Server actions are executed as a whole on the server, unlike regular actions which run step-by-step on the client. As a result, the outcomes of server actions are shown only after the entire action is complete, rather than incrementally.

When to choose Server Action vs regular Action

Client action:

• Load and send data between UI components and client-side logic

• Actions with navigations and redirects

• Calling component methods or accessing document/window objects is needed

Server action:

• The secure operation code must remain inaccessible to users at all times

• Extensive data transfer between steps. In a client action, results are returned to the client and then sent from the client to the next step. In a server action, data is transferred directly between servers, saving the client's bandwidth.