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

## 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.
- Server component return a rendered html to the browser and so the react hyderation is quickly done as compared to client component. 

React send rendered server somponent html elements (known as RSC payload) along with client side javascript bundle with the request, the client code (js) then hydrates on the browser.

#### Now let us understand how to use 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 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. 

To understand detail about [Server Actions](https://www.ranuvijay.me/blogs/understanding-server-actions-reactjs), do read about server actions after completing this page.


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 request to get the data,  here, on server component we get the data along with our component. This may or may not 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. 

Also as the data is being fetched on the server, it may be possible that the database or the api endpoint to get the data may be near to your server or in a closed enviornment, so the fetching of data may be quicker than doing it on the client side.

The fetched data along with the rendered html is returned to our browser in a single request call.

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

To understand detail about [Server Actions](https://www.ranuvijay.me/blogs/understanding-server-actions-reactjs), do read about server actions after completing this page.


We can now 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)

### Things to understand here - 

- We created a single client component and adjusted it to be used on both the cases of either to create a new order instance or to update an already order instance.
- We are using react.js **Code Reusibility**
- We can import our one client component into two server component.
- The client form/component will gets its required data as props.
- The respective server component is sending the required data as props to the single client components.
- The client component can be used as child component of a server component.
- Fetching data on derver component is quicker than on client component in most cases.
- Sometimes the demand requires us to only fetch the data on the client side. for example, get another dataset when someone on browser select a userCategory, in that case we have to get the data on client side only after the selection of userCategory value, on the onSelect or onChange event os the select deopdown.


### Why do we need Server Component -

- To pass static html elements to client component. for example we may need some different static elements to show on our create and update orderForm which is a client component, so from our server components we can pass static elemts to our shared client component. We can pass page name as props to orderForm as "Create Order" or ":Update Order" respectably from our server components to client component.
- To fetch the data on the server and to pass it to client.
- We can also create server actions on the server component page but I have created it in a new file.


### Why do we need Client Component -
- The main reason is to have user interactivity possible. LIke Click and onChange events
- To run Effects on our 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. 

Do let me know if you need more clearity. 

Read about [Server Actions](https://www.ranuvijay.me/blogs/understanding-server-actions-reactjs), to understand how to create and use them. 

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 client and server component and see how we can use them in best possible way.

Understanding Client and Server Component React.Js

Contact Me

I want to hear from you