# 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

{% hint style="danger" %}
Server actions are subject to **Scheduled Jobs/Webhooks** & **Server Actions** limits. For more details, please refer to the [pricing page](https://uibakery.io/pricing).
{% endhint %}

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:

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

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

```javascript
return {{params}};
```

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

{% @arcade/embed flowId="uha4zrzmUs5ZdipI3CXY" url="<https://app.arcade.software/share/uha4zrzmUs5ZdipI3CXY>" %}

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

```javascript
return {{data.value}} * 3;
```

&#x20;     Execute the action and check the result.

7. Next, add a button to your page that will execute the action and a Text component to display the result.
8. For the **button**, select your server action as the **On Click** trigger.&#x20;
9. 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.

{% @arcade/embed flowId="vPbC89rZ3InXbVMABcyQ" url="<https://app.arcade.software/share/vPbC89rZ3InXbVMABcyQ>" %}

## 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                                                                      |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| <ul><li>Load and send data between UI components and client-side logic</li></ul> | <ul><li>The secure operation code must remain inaccessible to users at all times</li></ul> |
| <ul><li>Actions with navigations and redirects</li></ul>                         | <ul><li>Extensive data transfer between steps</li></ul>                                    |
| <ul><li>Calling component methods or accessing document/window objects</li></ul> |                                                                                            |