API routes vs server actions decision in NextJS - Visual Side-by-Side Comparison

Concept Flow - API routes vs server actions decision

Start: User triggers data operation

↓

Decision: Use API Route or Server Action?

↓

API Route chosen

↓

Client calls API

↓

API Route runs

↓

Response sent

↓

Client updates UI

↓

End

This flow shows how a user-triggered data operation leads to choosing between API routes or server actions, then how each path processes and updates the UI.

Execution Sample

NextJS

export async function POST(request) {
  const data = await request.json();
  // process data
  return new Response('OK');
}

// vs

'use server';
export async function submitData(formData) {
  // process data
}

Shows a simple API route POST handler and a server action function for data submission.

Execution Table

Step	Trigger	Path Chosen	Action	Result	UI Update
1	User submits form	Decision	Check if server action supported	Server action supported	No UI change yet
2	Decision	Server Action	Call server action function	Server action runs on server	No UI change yet
3	Server action runs	Server Action	Process data and return	Data processed successfully	UI updates with success message
4	User submits form	Decision	Check if server action supported	Server action not supported	No UI change yet
5	Decision	API Route	Client calls API route POST	API route receives request	No UI change yet
6	API route runs	API Route	Process data and send response	Response sent with status OK	UI updates with success message
7	End	Both	Operation complete	Data handled	UI reflects new state

💡 Execution stops after UI updates reflecting the data operation completion.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6	Final
pathChosen	undefined	server action	server action	api route	api route	final decision
dataProcessed	false	false	true	false	true	true
uiState	initial	initial	success message	initial	success message	updated

Key Moments - 2 Insights

Why choose server actions over API routes?

Server actions run directly on the server and integrate tightly with React components, reducing client-server round trips. See execution_table rows 1-3 for how server actions handle data without extra client calls.

When must we use API routes instead of server actions?

Use API routes when you need a RESTful endpoint accessible from anywhere or when server actions are not supported, as shown in execution_table rows 4-6 where the decision falls back to API routes.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'pathChosen' variable after step 3?

A server action

B api route

C undefined

D both

💡 Hint

Check variable_tracker row for 'pathChosen' after step 3.

At which step does the UI update with a success message when using API routes?

A Step 3

B Step 6

C Step 2

D Step 5

💡 Hint

Look at execution_table rows where UI Update column changes for API route path.

If server actions are not supported, what changes in the execution flow?

A Client calls server action anyway

B No data operation happens

C Client calls API route instead

D UI updates without server call

💡 Hint

See execution_table rows 4 and 5 for fallback behavior.

Concept Snapshot

API routes are server endpoints called via HTTP requests, good for REST APIs and external access.
Server actions run server-side functions directly from React components, reducing client-server trips.
Choose server actions for tight integration and simpler code.
Use API routes when you need external or RESTful access.
Decision depends on support, use case, and architecture.

Full Transcript

This visual execution shows how a user-triggered data operation in Next.js leads to choosing between API routes and server actions. The decision depends on support and use case. Server actions run server-side functions directly from React components, reducing client-server communication. API routes are traditional HTTP endpoints called by the client. The execution table traces steps from user action, decision, server processing, to UI update. Variables track the chosen path, data processing state, and UI state. Key moments clarify when to pick each method. The quiz tests understanding of the flow and variable states.