Server actions

Server actions enable you to create custom backend logic that runs entirely on the server, unlike regular actions that are executed in the browser. For better understanding, you can think of server actions as API endpoints.

Furthermore, server actions are hidden from the end user. This means that 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.

Creating a server action

Server actions are subject to Scheduled Jobs/Webhooks & Server Actions limits. For more details, please refer to the pricing page.

Server actions can be created, just like regular actions, using the plus sign in the Actions panel. Once created, these actions can be assigned to a component trigger or executed via the Execute Action step. Server actions, like regular actions, can consist of multiple steps to load, send, and process data using JavaScript or Python.

Let's review an example of creating a basic server action that will accept a value from an input component and multiply it.

To create a server action:

1. Click on the plus sign in the Actions panel and select Server action.

2. Next, select the JavaScript Code step.

3. Add a Text input component to the page and set its value using the Params settings object of the server action:

{
  value: {{ui.input.value}},
}

1. Update the JavaScript code step to return the newly configured parameters:

return {{params}};

1. Enter some number in the input form - execute the action and check the result.

1. Now, add another JavaScript code step to your action to multiply the value of the input:

return {{data.value}} * 3;

Execute the action and check the result.

1. Next, add a button to your page that will execute the action and a Text component to display the result.

2. For the button, select your server action as the On Click trigger.

3. For the Text component, add the following reference to the Value field:

Result: **{{actions.multiplyInput.data}}**

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

Difference between Client-side actions and Server actions

So what are the differences between server actions and regular actions and in what cases would either of them be better? Let's explore this in more details.

Feature	Client-side actions	Server actions
Access to browser context	Full access to browser context	No access to browser context (for example, document, window)
Security	Exposed to end user, potentially less secure	Hidden from the end user, ensuring secure handling of permissions and user-based logic
User variable ({{user}})	Depends on client-side context	Securely defined on the server based on authentication, cannot be falsified
Referencing components, actions, or methods	Can reference components, actions, and call UI element methods	Cannot reference components, other actions in steps, or call UI element methods (for example, {{ui.modal.open}}); values must be specified in the Params object
Data sharing between steps	Data is passed to the client for each step	Data is not passed between steps via the client; execution happens entirely on the server
Execution behavior	Run step-by-step on the client, outcomes shown incrementally	Run entirely on the server, outcomes shown after completion

When to choose Client-side actions vs. Server actions

Choose client-side actions	Choose server actions
Load and send data between UI components and client-side logic	The secure operation code must remain inaccessible to users at all times
Actions with navigations and redirects	Extensive data transfer between steps
Calling component methods or accessing document/window objects