Client Component
A component whose JavaScript reaches the browser, letting it hold state, handle events, and use browser APIs.
See it
What it is
A Client Component is a component whose module is available to the browser, so it can hold state, run effects, read browser APIs, and handle clicks or typing. In React Server Components, a file marked with 'use client' starts a client boundary. Frameworks can still pre-render its initial HTML on the server; client does not mean client-only rendering.
Use one for the smallest interactive leaves of a server-rendered tree: a search box, disclosure button, carousel, or live chart. Keep data fetching and static layout in Server Components when possible, then pass serializable data into the client leaf.
Gotcha: 'use client' applies to the module graph below the boundary, not just one function. Importing a large library or an entire layout from that file can pull it into the browser bundle. Put the boundary as low as the interaction allows, and do not pass functions or other non-serializable props across it.
Ask AI for it
Split this Next.js App Router screen into Server and Client Components. Keep fetching and static markup in the async server page, then move only the interactive search controls into a leaf file with 'use client', useState, and onChange. Pass serializable result data across the boundary, avoid importing server-only modules into the client file, and report which imports now enter the browser bundle.