Use server directive in NextJS - Step-by-Step Execution

Concept Flow - Use server directive

Start Component File

↓

Add 'use server' Directive

↓

Define Server-only Functions

↓

Export Component

↓

Next.js Server Processes Component

↓

Server-only Code Runs on Server

↓

Client Receives Rendered Output

↓

Client Interacts with Component

↓

Server Functions Can Be Called via Server Actions

The 'use server' directive marks functions to run only on the server, separating server logic from client code in Next.js components.

Execution Sample

NextJS

"use server";

async function saveData(formData) {
  const data = formData.get("data");
  // server-only logic
}

export default function Page() {
  return (
    <form action={saveData}>
      <input type="hidden" name="data" value="info" />
      <button type="submit">Save</button>
    </form>
  );
}

This code marks saveData as server-only, so it runs on the server when the form is submitted via the button.

Execution Table

Step	Action	Code Evaluated	Result	Notes
1	Read file	"use server" directive found	Mark functions below as server-only	Server-only functions separated
2	Define saveData	async function saveData(formData)	Function saved as server-only	Not bundled to client
3	Export Page component	function Page()	Component ready for rendering	Client and server parts separated
4	Render Page on server	JSX <button>	Button HTML generated	Sent to client
5	Client loads page	Button rendered	User sees button	Client can interact
6	User clicks button	form submission triggers saveData(formData)	Server action called	Runs saveData on server
7	saveData runs	saveData(formData)	Data saved on server	No client code runs saveData
8	Return response	saveData completes	Client updates if needed	Server-client interaction done
9	Exit	No more actions	Process complete	Server directive enforced

💡 Execution stops after server function completes and client updates if needed

Variable Tracker

Variable	Start	After Step 2	After Step 6	Final
saveData	undefined	Function defined (server-only)	Function called with formData	Function completes execution
Page	undefined	Function defined	Rendered on client	Component remains unchanged

Key Moments - 2 Insights

Why does the saveData function not run on the client?

Because of the 'use server' directive (see execution_table step 1), Next.js treats saveData as server-only and excludes it from client bundles.

How does the client trigger the server-only saveData function?

The client triggers it via a server action call on button click (execution_table step 6), which runs the function on the server.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what happens?

A The server renders the button HTML to send to the client

B The client runs the saveData function

C The saveData function is defined on the client

D The button is clicked by the user

💡 Hint

Check step 4 in execution_table where rendering happens on the server

At which step does the saveData function run on the server?

A Step 6

B Step 7

C Step 3

D Step 5

💡 Hint

Look at step 7 in execution_table where saveData executes

If the 'use server' directive was removed, what would change in the execution?

A The button would not render

B The saveData function would still run on the server

C saveData would run on the client instead of the server

D The component would fail to compile

💡 Hint

Refer to variable_tracker and key_moments about server-only function behavior

Concept Snapshot

"use server" directive in Next.js
- Place at top of file to mark server-only functions
- Server-only functions run only on server, not bundled to client
- Client calls server functions via server actions
- Helps separate server logic from client UI
- Improves security and performance by isolating server code

Full Transcript

The 'use server' directive in Next.js marks functions to run only on the server. When Next.js reads a component file with this directive, it separates server-only functions from client code. The server renders the component's HTML and sends it to the client. When the user interacts, such as clicking a button, the client triggers server actions that call the server-only functions. This keeps server logic secure and prevents it from running on the client. The execution table shows each step from reading the directive, defining functions, rendering, client interaction, to server function execution and completion.

Practice

1. What is the main purpose of the use server directive in Next.js?

easy

A. To enable client-side rendering of components.

B. To import CSS stylesheets into components.

C. To mark functions that should only run on the server for security and performance.

D. To declare global variables accessible on both client and server.

Solution

1. Step 1: Understand the role of use server

   The directive marks functions to run only on the server side, not on the client.

2. Step 2: Recognize benefits

   This separation helps keep sensitive code secure and improves app performance by avoiding client execution.

3. Final Answer:

   To mark functions that should only run on the server for security and performance. -> Option C

4. Quick Check:

   use server = server-only functions [OK]

Hint: Remember: use server means run code only on server [OK]

Common Mistakes:

• Thinking it enables client-side rendering
• Confusing it with CSS imports
• Assuming it shares variables globally

2. Which of the following is the correct way to declare a server-only function using the use server directive in Next.js?

easy

A. 'use server'; function fetchData() { return 'data'; }

B. "use server" function fetchData() { return 'data'; }

C. use server; function fetchData() { return 'data'; }

D. use server() function fetchData() { return 'data'; }

Solution

1. Step 1: Identify correct directive syntax

   The use server directive must be a string literal: 'use server';

2. Step 2: Check function declaration

   The function follows normal JavaScript syntax after the directive.

3. Final Answer:

   'use server'; function fetchData() { return 'data'; } -> Option A

4. Quick Check:

   Directive as string literal = correct syntax [OK]

Hint: Use quotes around use server directive [OK]

Common Mistakes:

• Omitting quotes around use server
• Using semicolon incorrectly
• Trying to call use server as a function

3. Given the code below, what will be the output when the component renders?

"use client";
import { useState } from 'react';

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

  async function increment() {
    'use server';
    // server-only logic
    return count + 1;
  }

  return  setCount(count + 1)}>Count: {count};
}

medium

A. Button shows count starting at 0 and increments on click.

B. Error because server function is called inside client component.

C. Button shows count but does not update on click.

D. Button shows count starting at 1 immediately.

Solution

1. Step 1: Identify client and server code

   The component uses "use client" so it runs on client. The increment function is marked 'use server' but is not called in this code.

2. Step 2: Understand state update

   The button's onClick updates state locally with setCount(count + 1), so count increments on click.

3. Final Answer:

   Button shows count starting at 0 and increments on click. -> Option A

4. Quick Check:

   Client state updates on click = Button shows count starting at 0 and increments on click. [OK]

Hint: Server functions don't run unless explicitly called [OK]

Common Mistakes:

• Assuming server function runs automatically
• Expecting error from server function inside client
• Thinking count starts at 1

4. What is wrong with the following Next.js server function?

'use server'
export async function getData() {
  const res = await fetch('/api/data');
  return res.json();
}

medium

A. Missing semicolon after 'use server' directive.

B. The fetch URL should be absolute or use Next.js fetch options.

C. Cannot use fetch inside server functions.

D. Async functions cannot be marked with 'use server'.

Solution

1. Step 1: Check directive syntax

   Missing semicolon is not a syntax error in JavaScript, so not critical here.

2. Step 2: Analyze fetch usage

   In server functions, fetch should use absolute URLs or Next.js fetch options to avoid errors.

3. Final Answer:

   The fetch URL should be absolute or use Next.js fetch options. -> Option B

4. Quick Check:

   Server fetch needs absolute URL or options [OK]

Hint: Use absolute URLs in server fetch calls [OK]

Common Mistakes:

• Thinking semicolon is mandatory after directive
• Believing fetch is disallowed on server
• Assuming async can't be used with use server

5. You want to create a Next.js API route that uses a server-only function to fetch user data securely. Which approach correctly uses the use server directive to keep the fetch logic server-side while exposing only safe data to the client?

hard

A. Fetch data in client components and mark the fetch function with 'use server' to secure it.

B. Mark the API route file with 'use server' and call fetch directly in client components.

C. Use 'use server' in client components to fetch data and pass it to API routes.

D. Declare 'use server' inside the API route handler and call fetch there, then return safe data.

Solution

1. Step 1: Understand server-only logic placement

   The server-only fetch logic should be inside the API route handler marked with 'use server' to keep it secure.

2. Step 2: Avoid client-side fetch for sensitive data

   Client components should not fetch sensitive data directly or use 'use server' since it only works server-side.

3. Final Answer:

   Declare 'use server' inside the API route handler and call fetch there, then return safe data. -> Option D

4. Quick Check:

   Server fetch in API route = secure data [OK]

Hint: Keep fetch in API route with use server [OK]

Common Mistakes:

• Trying to use use server in client components
• Fetching sensitive data directly on client
• Marking entire API route file incorrectly