# Server and client components

All components are Server Components by default. Add `"use client"` to start a Client Component
boundary.

## Server Components

Server Components can be `async` and use [request APIs](../server-runtime-apis.md), databases, and
secrets. They cannot use state, effects, or browser APIs.

```tsx
// app/products/page.tsx
import { getProducts } from "../lib/products"
import { ProductList } from "./product-list"

export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductList products={products} />
}
```

You can learn more about them in the [React docs for Server Components](https://react.dev/reference/rsc/server-components).

## Client Components

Add `"use client"` at the top of a module to start a client boundary. Components imported from that
boundary are Client Components.

```tsx
"use client"

import { useState } from "react"

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

Client Components can use state, effects, event handlers, and browser APIs. They cannot be `async`.

You don't need to add `"use client"` to every interactive component. The directive marks the
boundary, and components imported by it are already client components. You can learn more about this
in the [React docs for "use client"](https://react.dev/reference/rsc/use-client).