Why Use client directive in NextJS? - Purpose & Use Cases

The Big Idea

Discover how a simple directive can transform your Next.js app from static to instantly interactive!

The Scenario

Imagine building a Next.js app where you want some parts to update instantly on user actions, like clicking a button or typing in a form, but you have to reload the whole page or write complex code to handle this.

The Problem

Without the client directive, you struggle to mix server-rendered content with interactive client-side features. This leads to slow updates, confusing code, and a poor user experience because the page reloads or freezes while waiting for server responses.

The Solution

The use client directive tells Next.js which components should run in the browser, enabling smooth, instant interactivity without losing the benefits of server rendering.

Before vs After

✗ Before

export default function Button() { return <button onClick={() => alert('Clicked!')}>Click me</button>; }

✓ After

"use client";
import { useState } from 'react';
export default function Button() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>; }

What It Enables

It enables seamless interactive components that update instantly on the client while keeping your app fast and SEO-friendly.

Real Life Example

Think of a shopping cart icon that updates the number of items immediately when you add a product, without reloading the page or waiting for the server.

Key Takeaways

Manual mixing of server and client code is slow and complex.

use client marks components to run in the browser for instant interactivity.

This improves user experience with fast, dynamic updates in Next.js apps.