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:
Click on the plus sign in the Actions panel and select Server action.
Next, select the JavaScript Code step.
Add a Text input component to the page and set its value using the Params settings object of the server action:
Update the JavaScript code step to return the newly configured parameters:
Enter some number in the input form - execute the action and check the result.
Now, add another JavaScript code step to your action to multiply the value of the input:
Execute the action and check the result.
Next, add a button to your page that will execute the action and a Text component to display the result.
For the button, select your server action as the On Click trigger.
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 ( | 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, |
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 |
---|---|
|
|
|
|
|
Last updated