What is a React Server Component and how is it different from a regular component?

A Server Component renders entirely on the server, sending only the finished result to the browser instead of the actual JavaScript code needed to run it. This means a Server Component cannot use hooks like useState or respond to clicks directly, but it can access server only resources, like a database, directly and safely.

// A Server Component, this is the default in frameworks like Next.js
async function ProductList() {
  const products = await db.products.findAll(); // safe, runs only on the server
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}