Server action in client components in NextJS - Step-by-Step Execution

Concept Flow - Server action in client components

User clicks button

↓

Client component calls server action

↓

Server action runs on server

↓

Server returns result

↓

Client component updates UI

Shows how a client component triggers a server action, which runs on the server and returns data to update the UI.

Execution Sample

NextJS

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  async function increment() {
    'use server';
    return 1;
  }

  async function handleClick() {
    const result = await increment();
    setCount(prevCount => prevCount + result);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

A client component with a button that calls a server action to increment a count.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count=0	Render button	count=0	Button with text 'Count: 0'	Button text shows 'Count: 0'
2	User clicks button	count=0	Call handleClick -> calls server action increment	count=0	No immediate change	No DOM change yet
3	Server action runs	N/A	increment returns 1	N/A	N/A	N/A
4	handleClick resumes	count=0	setCount(0 + 1)	count=1	Button re-renders	Button text updates to 'Count: 1'
5	User clicks button again	count=1	Call handleClick -> calls server action increment	count=1	No immediate change	No DOM change yet
6	Server action runs	N/A	increment returns 1	N/A	N/A	N/A
7	handleClick resumes	count=1	setCount(1 + 1)	count=2	Button re-renders	Button text updates to 'Count: 2'
8	No more clicks	count=2	No action	count=2	No re-render	No DOM change

💡 Execution stops when user stops clicking; state stabilizes at count=2.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 3 Insights

Why does the UI update only after the server action finishes?

Because the server action runs asynchronously on the server, the client waits for its result before updating the state and re-rendering. See execution_table steps 2, 3, and 4.

Is the server action code running on the client?

No, server actions run only on the server. The client calls them asynchronously and waits for the response. This is shown in execution_table step 3.

Why is there no immediate UI change when the button is clicked?

Because the state update depends on the server action result, which takes time. The UI updates only after receiving the result, as in steps 4 and 7.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 4?

A 0

B 2

C 1

D Undefined

💡 Hint

Check the 'State After' column at step 4 in the execution_table.

At which step does the server action return its result?

A Step 2

B Step 3

C Step 5

D Step 7

💡 Hint

Look for the step where 'increment returns 1' in the Action column.

If the server action returned 2 instead of 1, what would be the count after step 4?

A 3

B 1

C 2

D 0

💡 Hint

Refer to how setCount adds the server action result to count in step 4.

Concept Snapshot

Server actions run on the server but can be called from client components.
Client triggers server action asynchronously.
Server returns data, client updates state.
Use 'use server' directive inside server action.
UI updates only after server response.
Enables secure, fast server logic from client.

Full Transcript

This visual trace shows how a client component in Next.js calls a server action. When the user clicks the button, the client calls the server action asynchronously. The server action runs on the server and returns a result. The client waits for this result, then updates the state variable 'count' and re-renders the button with the new count. The execution table details each step, showing state before and after, and when the DOM updates. Key moments clarify why the UI updates only after the server action finishes and that server actions do not run on the client. The visual quiz tests understanding of state changes and server action timing. This helps beginners see how server actions integrate with client components in Next.js.