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.

FeatureClient-side actionsServer 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 actionsChoose 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

Last updated

© 2024 UI Bakery