.svg?alt=media&token=bc2eb9b7-34e5-43db-ab91-7ad83003c5fd)
Server actions
Last updated
Last updated
© 2024 UI Bakery
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.
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.
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.
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.
