Client Components and Interactivity
Learn when and how to use Client Components for interactive UI elements that require client-side state.
Meet Client Components
Welcome to Client Components! In Next.js with the App Router, components are Server Components by default. But sometimes, you need interactivity directly in the browser.
Client Components are special components that run on the client-side, meaning in the user's web browser. They are essential for adding dynamic features to your application.
Server vs. Client: A Quick Look
Let's quickly recap: Server Components render on the server, ideal for static content, data fetching, and reducing client-side JavaScript.
Client Components, on the other hand, allow for:
- User interaction (clicks, input changes)
- Managing state with React Hooks (
useState,useEffect) - Accessing browser-specific APIs (
localStorage,window)
They bring your UI to life!
All lessons in this course
- Server Components Deep Dive
- Client Components and Interactivity
- Advanced Data Fetching Patterns
- Caching, Revalidation, and Streaming