Server Actions Fundamentals & RPC Execution Model

The 30-Second Interview Answer

Server Actions are asynchronous server functions defined with the "use server" directive. They implement a type-safe Remote Procedure Call (RPC) protocol over HTTP POST requests. Next.js automatically creates internal POST endpoints, serializes arguments, executes the action on the server, revalidates cache segments, and returns the updated RSC Flight payload in a single network roundtrip.

Learning Objectives

Explain the "use server" directive at function versus file scope.

Understand the underlying HTTP POST RPC protocol and action ID generation.

Pass arguments safely to Server Actions with bind and FormData.

Explain how Server Actions return both mutation results and updated RSC Flight data simultaneously.

Prerequisites & Background Knowledge

HTTP POST requestsRPC mental modelsReact Server Components

Why Interviewers Care

Server Actions represent the modern mutation backbone of Next.js and React 19. Interviewers test candidates on how they work under the hood.

The Challenge

Explain the RPC execution model of Server Actions. How does Next.js execute them under the hood, and what happens on the network during a Server Action invocation?

Code Architecture & Implementation

1// app/actions/cart.ts
2'use server'; // File-level directive: exports become Server Action endpoints
3
4import { db } from '@/lib/db';
5import { cartItems } from '@/lib/schema';
6import { revalidatePath } from 'next/cache';
7import { cookies } from 'next/headers';
8
9export async function addToCartAction(productId: string, quantity: number) {
10  // 1. Verify user session
11  const cookieStore = await cookies();
12  const sessionId = cookieStore.get('cart_session')?.value;
13  if (!sessionId) throw new Error('Unauthenticated');
14
15  // 2. Perform database mutation
16  await db.insert(cartItems).values({
17    sessionId,
18    productId,
19    quantity,
20  });
21
22  // 3. Invalidate route cache
23  revalidatePath('/cart');
24
25  return { success: true, message: 'Item added to cart' };
26}

Architectural Explanation

When you add "use server", Next.js compiles the function into a public HTTP POST endpoint. When called from a Client Component, Next.js executes an RPC fetch call with headers Next-Action: <hash> and the serialized arguments in the request body. Once the server executes the mutation, it checks if revalidatePath or revalidateTag were invoked. If so, it immediately renders the updated RSC tree and streams both the return value AND the fresh RSC Flight data back to the client in that same HTTP response, avoiding a separate GET request.

Common Mistakes & Anti-Patterns

Assuming "use server" makes a component render on the server (it does not; components are Server Components by default; "use server" marks mutation endpoints).

Trusting client-supplied arguments without server-side validation (e.g. taking `userId` from client parameters instead of the verified session cookie).

Forgetting that any exported function in a "use server" file becomes a publicly callable HTTP endpoint.

Interview Follow-Up Traps

The interviewer asks: "Can you pass complex objects like DOM elements or functions as arguments to a Server Action?" No! Arguments must be serializable according to the React Flight protocol.

Frequently Asked Questions

Are Server Actions REST endpoints?

No. They are RPC (Remote Procedure Call) endpoints designed for internal UI mutations, though they operate over standard HTTP POST.

Can Server Actions be called outside of forms?

Yes! They can be called from event handlers (onClick), useEffect, or inside custom hooks using startTransition.

What is the maximum payload size for a Server Action?

Next.js defaults to 1MB (configurable via serverActions.bodySizeLimit in next.config.js).

Dynamic Rendering vs Static Rendering Triggers Form Architecture: GET Navigation (next/form) vs POST (useActionState)