Why Server action in client components in NextJS? - Purpose & Use Cases

The Big Idea

Discover how to make your client code talk to the server effortlessly with server actions!

The Scenario

Imagine building a web app where every time a user clicks a button, you manually write code to send data to the server, wait for a response, and then update the page. You have to handle loading states, errors, and data syncing all by yourself.

The Problem

This manual approach is slow to write, easy to get wrong, and makes your code messy. You might forget to handle errors or loading states, causing a bad user experience. Plus, managing server communication separately from UI logic is confusing.

The Solution

Server actions allow client components to call server-side functions directly without extra setup, making your app faster, cleaner, and easier to maintain.

Before vs After

✗ Before

async function handleClick() {
  const res = await fetch('/api/save', { method: 'POST', body: JSON.stringify(data) });
  const result = await res.json();
  setState(result);
}

✓ After

'use server';

export async function saveData(data) {
  // server logic here
}

// In client component (import saveData):
<button onClick={() => saveData(data)}>Save</button>

What It Enables

You can build interactive apps where client UI calls server logic directly, simplifying data flow and improving performance.

Real Life Example

Think of a comment form on a blog: when you submit a comment, the client component calls a server action to save it instantly without extra API routes or complex state handling.

Key Takeaways

Manual server calls are complex and error-prone.

Server actions let client components run server code directly.

This makes apps simpler, faster, and easier to build.