Server Components vs Client Components

// Server Component
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

// Client Component
"use client";
function AddToCartButton({ productId }) {
  const [isAdding, setIsAdding] = useState(false);
  return (
    <button onClick={() => setIsAdding(true)}>
      {isAdding ? "جاري الإضافة..." : "أضف إلى السلة"}
    </button>
  );
}