React Amazing Facts

My last week's research and knowledge about ReactJS

React server components are changing the way web apps are built. But a lot of conversation, and your reality is way more complicated than they really are. After this, my documentation will be read to you completely. You can say this is easier, and best practices for your code structure, and your coding level boost as an experience level.

So, think of it...!
React sends JavaScript to the browser, and then the browser builds your UI. Now, with the server component, React builds part of the UI on the server first, then sends the resulting pieces. So, it's kind of like getting a partially assembled IKEA furniture instead of just a piece and instructions

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");

  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div>
      <h1>Users List</h1>

      {users.slice(0, 3).map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

Example Explanation:
React Server Components fetch data on the server first, build the UI there, and then send ready-made HTML to the browser — just like receiving partially assembled IKEA furniture instead of building everything yourself in the browser.

Now, let's look at the Server Components

Now we are building the same thing as a server component, and notice it's an asynchronous function.
You can read the code below:

import db from "@/lib/db";

export default async function UsersPage() {
  // Data fetched directly from database
  const users = await db.user.findMany();

  return (
    <div>
      <h1>Users List</h1>

      {users.slice(0, 3).map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

const db = {
  user: {
    findMany: async () => {
      return [
        {
          id: 1,
          name: "Asad Ullah",
          email: "[e-mail]",
        },
        {
          id: 2,
          name: "Johnas Schmedtmann",
          email: "[e-mail]",
        },
        {
          id: 3,
          name: "Brad Traversy",
          email: "[e-mail]",
        },
      ];
    },
  },
};

export default db;

Now I hope this code example makes good sense for you.

You can see in this image and code that I'm hitting the database directly. There is no hook; I'm using just await, no API calls, no client-side data fetching. So the component runs on the server, grabs the data, and then sends the finished HTML to the browser.

Now you can see there are three big wins here:

1. You have a smaller JavaScript Bundle **Smaller JavaScript **bundle because server logic doesn't ship to the browser.
2. Direct Database access Direct Database access, which means faster data fetching
3. SEO Faster and Better Now we can a extra benefit with our browser behavior and better work is SEO. Because the content is rendered on the server.

I've seen the app reduse there bundle size 30% just by moving data fetching to the server components. Now, one thing to remember is that server components can't use hooks and handleEventFunctions. So there are for the data fetching and rendering. This does not mean you should leave regular client components. You still need to use regular client components for interactive stuff like buttons, form handling, and other features like a CRUD system