Study notes · 10% of the exam

Server Actions, Forms and Mutations

Server Actions are React Server Functions that Next.js exposes as POST endpoints. Know how they are defined, how their single-roundtrip response works, how the client queues them, and which security checks are yours to write.

Key points

1
Define with 'use server' at the top of a file (all exports) or inline in a Server Component. Client Components cannot define them, only import them or receive them as props.
2
Invoke from <form action>, formAction on submit buttons and inputs, event handlers or useEffect, ideally inside startTransition. The client dispatches actions one at a time.
3
The response re-renders the current route only if the action calls updateTag, revalidatePath or refresh, mutates cookies, or calls redirect. revalidateTag(tag, 'max') is stale-while-revalidate and skips that re-render.
4
redirect throws (keep it outside try, or use unstable_rethrow), defaults to push in actions, and sends a 303 for no-JavaScript form posts.
5
Built-in protections: Origin/Host CSRF check with allowedOrigins, a 1 MB body limit, encrypted action IDs (rotated at most every 14 days) with dead-code elimination, and encrypted closure variables (NEXT_SERVER_ACTIONS_ENCRYPTION_KEY for multiple instances).
6
Inside every action: authenticate, authorize the specific resource, validate input with a schema, and return only what the UI needs. Model expected errors as return values for useActionState.

Common traps

Checking auth in the page does not protect the actions it renders; they are reachable by direct POST.
Object.fromEntries(formData) includes $ACTION_ fields and any key the caller adds; never spread it into a database update.
React 19 resets uncontrolled form fields after a form action completes, even when it returns an error, so echo values back as defaultValue.

Read the source

Test yourself on Server Actions, Forms and Mutations

Ten questions, with the answer and explanation after each one.