Before starting let us first understand what is a client, server component and what is a server action. 

## Client Component -
- A client component runs of client where user interactivity is possible, such as onClick, and React Effects can work.
- All children of client, code that is a part of the Client module sub-tree is also run on the client.
- We have to mark "use client" at the very top of the page, and this creates a boundry between server and client component in the bundle tree, createing a different bundle / sub tree for client components. 

## Server Component - 
- Server component renders on server, and has no user interactivity possible.
- Server component can run once at built time or can run on each request if we have a web server for our server component.

React send rendered server somponent (known as RSC payload) along with client side bundle with the request, the client code hydreates on the browser.

## 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.

#### Now let us understand how to use all these. 

For the demonstration purpose I will take an example of the OrderForm (which I will show later), and see how can we use different components types and funtions to architect our application.

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)

We will create a route named **order** and two sub-routes named **new** and **[id]**

In our "/order/new" route we will  have the functionality to add a new order and under "/order/[id]" we can get the details of the order created and update the form, this [id] will be replced with the form instance id. 

Lets us create our first Server Component under route "order/new" 

### A Server Component
### /src/app/order/new/page.tsx

```
import OrderClientForm from "@/_lib/clientForms/orderForm";
import { getUserCategoryData } from "@/_lib/serverActions/orderAction";

export default async function Page() {
  const userCategoryData = await getUserCategoryData();

  if (userCategoryData?.error) {
    return <ErrorPage />;
  }

   return (
    <OrderClientForm
      //   userCategoryData={userCategoryData}
      userCategoryData={[
        { id: "1", name: "First Category" },
        { id: "2", name: "Second Category" },
      ]}
    />
  );
}

```

This page is a server component but it imports two things, one is a Client Component and other is a Server Action. 

Here on the server component we are fetching the userCategoryData and passing it as props to the client component, we can also get the userCategoryData on the client side on Select onFocus or on page load but to understand the concept I'm doing it here.

Client side fetching would do a extra client-server fetch call, once the component loads and then again do a fetch for the data call,  here, on server component we get the data with our component. This may or maynot be always useful because if the user does not fill the form then our fetched data would be of no use. and if the user fills, then there would be no wait time. So this depends on the specific need. 

### A client Component
### /src/_lib/ClientForms/OrderForm .tsx

```
"use client";
import { useEffect, useMemo } from "react";
import {
  createOrderData,
  upadteOrderDataById,
} from "../serverActions/orderAction";

type UserCategory = {
  id: string;
  name: string;
};
type PropsType = {
  userCategoryData: UserCategory[];
  orderFormData?: any;
  param?: string;
};

export default function OrderClientForm(props: PropsType) {

  const { userCategoryData, orderFormData, param } = props;

  const onSubmit = async () => {
    if (param) {
      // updateOrder
    await upadteOrderDataById(param, {});
    } else {
      // createNewOrder
   await createOrderData({});
    }
  };

  useEffect(() => {
    if (orderFormData) {
      // set the values receivd from the server component to form elements of the client component
    }
  }, [orderFormData]);

  const selectOptions = useMemo(
    () =>
      userCategoryData?.map((d) => (
        <option key={d.id} value={d.id}>
          {d.name}
        </option>
      )),
    [userCategoryData]
  );

  return (
    <div>
      <p className="py-6"> This is Client component Order form</p>
      <form onSubmit={onSubmit}>
        <label>Order Name</label>
        <input
          type="text"
          id="fname"
          name="fname"
          className="bordered border-2 border-[#000]"
        />
        <br />
        <label>User Category</label>
        <select
          id="userCategory"
          name="userCategory"
          className="bordered border-2 border-[#000]"
        >
          {selectOptions}
        </select>
        <br />
        <button type="submit" className="mt-2 bg-[#d9d9d9] px-3 rounded">
          Submit
        </button>
      </form>
    </div>
  );
}

```

As we can see, here we have all types of user interactivity, the onSubmit form mehod, button onClick, useEffects which were all not possible in the server component.

In the above client component we imported two Server Actions, one to create a new order and other to update the order form,.

**Now since server actions are async in nature we will have to also make our onSubmit function async and wait for result using await.**


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.

```
"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. 

and finally we can create our Server Component to update the Order Form. 

### A Server Component
### /src/app/order/[id]/page.tsx

```
import { getOrderDataById } from "@/_lib/serverActions/orderAction";
import { getUserCategoryData } from "@/_lib/serverActions/orderAction";
import OrderClientForm from "@/_lib/clientForms/orderForm";

type PropsType = {
  params: { id: string };
};

export default async function Page({ params }: PropsType) {

    const [orderFormData, userCategoryData] = await Promise.all([
    await getOrderDataById(params?.id),
    await getUserCategoryData(),
  ]);

  return (
    <OrderClientForm
      //   userCategoryData={userCategoryData}
      userCategoryData={[
        { id: "1", name: "First Category" },
        { id: "2", name: "Second Category" },
      ]}
      //   orderFormData={orderFormData}
      orderFormData={{ id: "1", orderName: "order-name", userCategory: "1" }}
      param={params?.id}
    />
  );
}

```

This is how our demo form will look like.  

![tyrt.png](https://api.ranuvijay.me/uploads/tyrt_58297f07f8.png)


### For the Order List detail - 

We can create a server component at "/order/page.tsx", fetch the list data and pass it to a client form named OrderListClientForm,  OrderListClientForm when opened will always come with the data (we dont have to wait for it) and then we can import our server function like deleteFn and filterFn in this OrderListClientForm to delete a particular item or to filter our data. OrderListClientForm should be a client component because we need user interactivity, we need to filter and also delete, onClick enevts will be required. 

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. 

Do let me know if you need more clearity. 

Thanks!

We will understand the best possible way to architect our react application using a combination client component, server component and server actions.

Understanding Client, Server Component and Server Actions React.Js

Contact Me

I want to hear from you