React: What are React Server Components vs Client Components?

1// Runs on server
2async function ProductList() {
3  const products = await db.query("SELECT * FROM products");
4  // Direct database access!
5  return (
6    <ul>
7      {products.map(p => (
8        <li key={p.id}>{p.name}</li>
9      ))}
10    </ul>
11  );
12}

1"use client";
2
3function AddToCartButton({ productId }) {
4  const [loading, setLoading] = useState(false);
5  // Can use hooks, browser APIs
6  return (
7    <button onClick={() => addToCart(productId)}>
8      Add to Cart
9    </button>
10  );
11}

1// Server Component (fetches data)
2async function ProductPage({ params }) {
3  const product = await getProduct(params.id);
4
5  return (
6    <div>
7      <h1>{product.name}</h1>
8      <p>{product.description}</p>
9      {/* Client component for interactivity */}
10      <AddToCartButton productId={product.id} />
11    </div>
12  );
13}