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, databases, and secrets. They cannot use state, effects, or browser APIs.

// 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 .

Client Components

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

"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" .