Server Actions (Non-Forms)

Triggering server mutations without HTML forms.

Next.js6 min readConcept 32 of 65

Beyond Forms

While Server Actions are tightly integrated with <form>, they are fundamentally just async functions.

You can import a Server Action into any Client Component and call it directly like a normal JavaScript function. Next.js automatically transforms the call into a secure HTTP POST request behind the scenes.

Micro-Mutations

Wrapping every single interactive element in a <form> can bloat your markup and feel restrictive.

For micro-mutations—like clicking a 'Like' button, dragging an item to reorder a list, or autosaving a draft—calling an action directly from an event handler like onClick or onDrop is much more ergonomic.

Direct Invocation

Inside a Client Component, assign the action to an event handler: <button onClick={async () => await upvotePost(id)}>Upvote</button>.

You can pass standard JavaScript arguments to the action (like an ID or an object), rather than relying solely on FormData extraction.

The Silent Failure

Test an 'Upvote' button that uses a non-form Server Action. With JS enabled, it works seamlessly. Turn JS off, and watch how the lack of a <form> wrapper results in a complete, silent failure.

Client Browser (React)

My Awesome Post

This is a post about why Server Actions are incredible, especially when used outside of forms.

onClick

Next.js Server

actions.ts
export async function upvotePost(id: number) {
'use server';

// Standard args, no FormData
await db.post.increment(id);
}

Network Request

Waiting for interaction...

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens if a user clicks a button with an `onClick={myServerAction}` handler, but JavaScript is disabled?
  2. 2When calling a Server Action directly from a Client Component (not in a form), how do you pass data to it?

Remember this

  • Server Actions can be called directly from Client Components like normal functions.
  • This is ideal for UI interactions that aren't form submissions (e.g., Like buttons).
  • Direct invocation allows you to pass standard arguments instead of FormData.
  • WARNING: Non-form actions completely lose Progressive Enhancement.
  • If JavaScript is disabled, the action will not fire.

Done with this concept?

Mark it complete to track your progress. No login needed.