Before starting let us first understand what are server action.

## Server Functions - 
- These are async function that runs of the server.
- Server functions can be created in server components.
- Server function can also be created in a seperate file marked as "use server" at the top.
- Server functions can be passed to a Client component from the server component as a props.
- Client components can also directly import and use the server functions.

I will request everyone to please read about [Client and Server Components](https://www.ranuvijay.me/blogs/understanding-client-and-server-components-reactjs), before continuining this blog, there i have explained in detail the working and also how to structure our application using combination of client and server components in detail. 

Here is the image of file structure of my components, it will help us to better understand the things - 

![Screenshot from 2025-09-30 20-45-59.png](https://api.ranuvijay.me/uploads/Screenshot_from_2025_09_30_20_45_59_7fc297e955.png)

Now let us create our first **Server Action** 

### Server Action 
### /src/_lib/serverActions/orderAction.ts

We can create a file for common funtionality for all the functions related to our order form, i.e. create, update, delete, list and search in a single file, this can help us to better manage.

To create server actions in a seperate file it is complusary to mark "use server" at the very top of the file.

```
"use server";

export async function getUserCategoryData() {
  try {
    let url = "https://....";
    // backend api url or directly from the node server database

    const res = await fetch(url, {
      method: "GET",
      headers: {
        Cookie: "cookies data",
      },
    });

    if (!res.ok) {
      const error = await res.json();
      const errMsg = error?.detail;
      if (errMsg === "user known error") {
        // if you want to show known error from backend.
        return { error: true, errMsg: errMsg };
      }
      // if unknown error
      return { error: true, errMsg: "Something went wrong!" };
    }
    return await res.json();
  } catch (error) {
      throw new Error("Server error!");
  }
}

export async function createOrderData(values: any) {
  return;
}

export async function getOrderList() {
  return;
}

export async function getOrderDataById(id: string) {
  return;
}

export async function upadteOrderDataById(id: string, data: {}) {
  return;
}

```

These server action will run on the server and the client, user would never see the backend api or any other critical information detail. 

### Why do we need Server Actions -
- To run async funtions
- To run function on the server
- To may be hide external API endpoints from the user at client side.
- To fetch data on the server side
- To execute async function on server from client components, server actions can be imported to client components.
- Since this runs on server we can check many of the user's permission and other related details before compliting the requst and then provide response accordingly. We will how have to fetch each and every data on the client.

In [Client and Server Components](https://www.ranuvijay.me/blogs/understanding-client-and-server-components-reactjs) blog, I have explained how to use server actions on the client as well as on server components.

I hope after reading all the above points, it must be clear for everyone to decide how to structure their appplication's components and how to user server actions. 

Find other [Blogs](https://www.ranuvijay.me/blogs/topics/working-with-react-js) to understand working with React.js.

Find other blogs on [React.Js](https://www.ranuvijay.me/blogs/categories/react-js) here.

Find blogs on other [Categories](https://www.ranuvijay.me/blogs#categories) here.

Find blogs on other [Topics](https://www.ranuvijay.me/blogs#topics) here.

**Thank You !!**


We will understand the working of server actions, how to create and use them and their benefits.

Understanding Server Actions React.js

Contact Me

I want to hear from you