Client Components

🔍 What Is It?

Client Components in Next.js are components that:

• →Run in the browser (and also on the server during SSR for the initial HTML)
• →Can use React hooks — useState, useEffect, useContext, custom hooks
• →Can handle events — onClick, onChange, onSubmit
• →Can access browser APIs — window, document, localStorage, navigator
• →Are marked with 'use client' — a directive at the top of the file

'use client' marks a boundary in the component tree. The component and everything it imports becomes part of the client bundle.

🎯 Why Do We Need It?

Server Components cannot handle interactivity. Anything that requires:

• →User input (typing, clicking, selecting)
• →State that changes over time (open/closed, count, form values)
• →Browser-specific APIs (geolocation, clipboard, localStorage)
• →Real-time updates (WebSocket, polling)
• →Third-party client libraries (charts, maps, rich text editors)

...must be a Client Component. The goal is to use Client Components for the minimum interactive surface area of your UI, keeping everything else as Server Components.

🏗️ What Happens in Real Projects?

Typical Client Components in a production app:

• →SearchBar — controlled input with state
• →AddToCartButton — onClick handler + optimistic UI
• →MobileNav — open/close toggle state
• →ThemeToggle — localStorage + state
• →DataTable — sorting, filtering, pagination state
• →RealtimeFeed — WebSocket subscription
• →DatePicker — complex UI state

The pattern: Server Components fetch data and pass it as props to Client Components. Client Components handle the interactive layer on top of that data.

⚙️ How It Works

Client Component rendering:

1. SSR phase — Client Components also render on the server for the initial page load, producing HTML. This is why you see content immediately even for interactive components.
2. Hydration — the browser downloads the JS bundle, React 'hydrates' the server-rendered HTML (attaches event listeners, initialises state)
3. Client-side rendering — subsequent re-renders happen entirely in the browser

The `'use client'` directive:

• →Must be at the very top of the file, before any imports
• →Marks the file and all its imports as client-side
• →Creates a serialisation boundary — props must be serialisable

💻 Example

Client Component Patterns — Real patterns for keeping Client Components lean and composing them with Server Components.

'use client'; // Must be first line

import { useState } from 'react';

export function AddToCartButton({ productId }: { productId: string }) {
  const [loading, setLoading] = useState(false);
  const [added, setAdded] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
    setLoading(false);
    setAdded(true);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {added ? '✓ Added' : loading ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits