Client Components

Interactivity in the browser

Add "use client" at the top of a file to make its components Client Components. They can use state, effects, event handlers and browser APIs. They are still prerendered to HTML on the server for the first load, then hydrated in the browser to become interactive. Keep client components small and push them to the leaves of the tree (a button, a form, a chart), so most of the page stays server-rendered and the JavaScript bundle stays small.

A Client Component

This file is from a small demo store I built with Next.js 16.3.8, React 19.3 and TypeScript; next build compiled and type-checked it successfully. The "use client" directive marks this file as client code; it uses useState and an onClick handler.

"use client";

import { useState } from "react";

export default function Counter({ start }: { start: number }) {
  const [count, setCount] = useState(start);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

The Client Component in the server HTML, run

I built the demo store with next build (Next.js 16.3.8), started it with next start and requested pages with curl; the output is copied from that run, trimmed to the relevant lines. Even though Counter is a Client Component, the server-rendered HTML already contains "Count: 5"; the browser then hydrates it to handle clicks.

curl -s http://localhost:3917/counter

Output:

<title>Counter | Stationery Shop</title>
<button>Count: 5</button>

त्वरित जाँच: Are Client Components rendered on the server for the first page load?

• Only in development
• No, never
• Yes, they are prerendered to HTML and then hydrated in the browser
• Only if they have no state