Concepts

Client Components

React components that run in the browser and can use hooks, event handlers, and browser APIs like localStorage.

What are Client Components?

Client Components are React components that run in the browser and can use interactive features like useState, onClick handlers, and browser APIs.

They're the default in traditional React apps, but in Next.js 13+ with the App Router, you need to explicitly mark them with 'use client' at the top of the file.

Most builders use them for anything interactive: forms, buttons, modals, client-side data fetching. They pair with Server Components, which handle the static stuff and data fetching on the server.

The 'use client' directive tells Next.js to include that component in the JavaScript bundle sent to the browser. Keep them small and use Server Components for everything else to keep your app fast.

Good to Know

Run in the browser and can use React hooks like useState and useEffect
Need 'use client' directive at the top of the file in Next.js App Router
Can access browser APIs like localStorage, window, and document
Add to your JavaScript bundle size, so use them only when you need interactivity
Can import and render Server Components as children

How Vibe Coders Use Client Components

1
Building a form with validation that updates as users type
2
Adding a modal that opens when someone clicks a button
3
Creating a dropdown menu with hover states and animations
4
Implementing client-side search that filters results in real-time

Frequently Asked Questions

Related Terms

React

A JavaScript library for building user interfaces with reusable components. Created by Meta, powers Facebook, Instagram, and thousands of apps.

Next.js

A React framework that handles routing, server rendering, and optimization out of the box so you can ship faster.

Server Components

React components that run exclusively on the server, rendering HTML before it reaches the browser.

Components

Reusable building blocks in software that handle specific functions and can be combined to build complete applications.

Remotion

An open-source framework for creating videos programmatically using React code instead of traditional video editing software.

AppWebsiteSaaSE-commDirectoryIdeaAI Business, In Days

Join 0 others building with AI