React Server Actions enable server-side mutations called directly from client components. Master vocabulary for Origin-based CSRF protection, deferred revalidatePath execution, file-level 'use server' directives, useOptimistic rollback semantics, and the redirect() pattern inside actions.
0 / 5 completed
1 / 5
A React Server Action is called from a Client Component with an invalid CSRF token. How does Next.js protect against this by default?
Next.js Server Actions are protected against CSRF by validating the Origin header. Requests from origins that don't match the application's origin are rejected. This is built-in and automatic — no developer action is required. Additionally, Server Actions use POST requests, which browsers don't auto-submit cross-origin without CORS preflight.
2 / 5
A Server Action uses revalidatePath('/dashboard'). When is the cache invalidated?
revalidatePath and revalidateTag in Server Actions are deferred until after the action completes and the response is committed. This prevents partial cache invalidation if the action fails midway. The cache is purged when the response is sent, and the next request for that path fetches fresh data.
3 / 5
A developer marks a function with 'use server' at the top of a .ts file (file-level directive). What does this mean for all exported functions in that file?
A file-level 'use server' directive marks all exported functions in that file as Server Actions. They can be imported and called from Client Components or other Server Components. React/Next.js serializes the call over a network boundary (HTTP POST) when invoked from the client side.
4 / 5
A Server Action is called with useOptimistic to update UI before the action completes. The action then throws an error. What happens to the optimistic update?
useOptimistic state is automatically rolled back when the Server Action completes — whether successfully or with an error. If the action succeeds, React replaces the optimistic state with the real server state. If it errors, React reverts to the pre-optimistic state. This is a core feature of React's optimistic update semantics.
5 / 5
A Server Action needs to redirect the user after completing. Which approach is correct?
Next.js's redirect() from next/navigation can be called directly inside a Server Action. It throws a special error that Next.js catches and converts to a redirect response. useRouter is a client-side hook and cannot be used in Server Actions. Returning a redirect object is not a built-in convention.