Client component
A client component (in React Server Components terminology) is a component marked with 'use client' that hydrates on the client and can use browser APIs, event handlers, state, and effects. Client components are interleaved with server components: server components render server-side and hand off to client components at the boundary.
The naming inversion catches teams off guard: in pre-RSC React, every component was effectively a client component; in the RSC world, the default is server, and 'client' is the opt-in. The boundary matters for bundle size: anything 'use client' marked (and its imports) ships to the browser. The disciplined pattern is to keep client components small and leaf-like (a date picker, a modal, an interactive chart) and let the server tree do the heavy lifting around them. Misplaced 'use client' high in the tree negates the RSC benefit by pulling large subtrees into the client bundle.
Related terms
- Server component
A server component (React Server Components) is a React component that runs only on the server — it can fetch data directly from the database, use server-only secrets, and ship zero JavaScript to the client.
- Hydration
Hydration is the process of attaching JavaScript event handlers and state to server-rendered HTML on the client — the page is visible immediately (fast FCP) but interaction works only after hydration completes.
- Island architecture
Island architecture is the frontend pattern where most of a page is static server-rendered HTML with no client JavaScript, and only the interactive components (the 'islands') hydrate independently.