ReviseAlgo Logo

Components

Client Components

Learn when to use Client Components in Next.js, how the use client boundary works, and how to keep browser interactivity scoped.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Explain what "use client" does.
  • Use Client Components for state, effects, and browser APIs.
  • Place client boundaries low in the tree.
  • Compose Client Components under Server Components safely.

    • Difficulty: Beginner.

    2. Prerequisites

  • React hooks.
  • Server Components.
  • App Router basics.

    • 3. Overview

    A Client Component is a React component that runs in the browser after hydration. In Next.js, a file becomes a Client Component entry point when it starts with the "use client" directive.

    4. Why This Topic Matters

    Most real apps need interactivity: buttons, modals, forms, tabs, charts, drag-and-drop, and browser APIs. Client Components provide that interactivity, but overusing them can increase bundle size and weaken server-rendering benefits.

    5. Real-World Analogy

    If Server Components are prepared in the kitchen, Client Components are tools placed on the table: a pepper grinder, a call button, or a card reader. They are interactive, but you only bring them out when the diner needs them.

    6. Core Concepts

    ConceptMeaning
    "use client"Directive that marks a module as a Client Component entry point.
    HydrationBrowser attaches React behavior to rendered output.
    Client bundleJavaScript sent to the browser for interactive code.
    Browser APIAPIs like window, localStorage, and DOM events.
    Serializable propsData passed from server to client that can be safely serialized.

    7. Syntax & API Reference

    The directive belongs at the top of the file before imports.

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? The page remains a Server Component, while only the toggle ships browser JavaScript.

    10. Interactive Playground

    Try this:

  • Add localStorage usage inside a Client Component.
  • Move "use client" from the page to a child component.
  • Inspect how many components really need interactivity.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Adding "use client" to a whole routeIt fixes hook errors quickly.Create a smaller Client Component.
    Passing non-serializable propsServer and client communicate through serialized data.Pass primitives, objects, arrays, or IDs.
    Fetching all data in the clientSPA habit.Fetch initial data on the server when possible.

    12. Best Practices

  • Use Client Components for state, effects, event handlers, and browser APIs.
  • Keep client boundaries small.
  • Pass IDs and plain data instead of server-only objects.
  • Keep data fetching in Server Components when it supports initial render.
  • Lazy-load heavy interactive widgets when appropriate.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Event handlersRequires JavaScriptHydration must complete.
    Browser APIsBrowser-onlyGuard APIs that may not exist in all browsers.
    Client bundlesNetwork and parse costKeep them small.

    14. Interview Questions

    Easy: What directive creates a Client Component?

    Answer: "use client".

    Medium: When do you need a Client Component?

    Answer: For React state, effects, event handlers, browser APIs, or interactive third-party widgets.

    Hard: Why should "use client" be pushed down the tree?

    Answer: Everything imported below a client boundary can become part of the client bundle, so small boundaries reduce shipped JavaScript.

    15. Debugging Exercise

    Bug report: "This page fails because localStorage is not defined."

    Solution

    Move the browser API access into a Client Component and read localStorage after hydration, usually inside useEffect.

    16. Practice Exercises

  • Easy: Build a counter Client Component.
  • Medium: Add a modal inside a server-rendered page.
  • Hard: Convert a client-heavy settings page into server data plus client controls.

    • 17. Scenario-Based Challenge

    A data table page is marked "use client" because filters are interactive. The table data is SEO-neutral but large. What is a better split?

    Walkthrough

    Fetch the table data in a Server Component, pass initial rows to a Client Component for filtering if needed, and keep only the filter controls and table interactions client-side.

    18. Quick Quiz

    1. Can Client Components use useState? Answer: Yes. 2. Can they use browser APIs? Answer: Yes, after hydration. 3. Should all pages be Client Components? Answer: No. 4. Does "use client" affect imports below it? Answer: Yes. 5. Can Server Components import Client Components? Answer: Yes.

    19. Summary & Key Takeaways

  • Client Components power browser interactivity.
  • "use client" marks the client boundary.
  • Keep boundaries as small as practical.
  • Fetch initial data on the server when possible.
  • Pass serializable props across the boundary.

    • 20. Cheat Sheet

    NeedClient Component?
    Button click stateYes
    useEffectYes
    Database queryNo
    Static headingNo
    Browser chart libraryYes

    21. Further Reading

  • Next.js Docs: Client Components.
  • Next.js Docs: Composition Patterns.
  • React Docs: State and Effects.

    • 22. Next Lesson Preview

    Chapter 3 is complete. Next, you will learn data fetching, starting with the enhanced fetch() API in Next.js.