FRONT END

Home › Glossary › Front End· 369 ·

Server Actions

\\sur-vur ak-shuns\\n.

Filed underFront EndSoftware Engineering

In brief · quick answer

Server Actions are async functions that run on the server but can be called directly from client components. They simplify data mutations in Next.js by eliminating the need to build separate API routes for form submissions and data changes.

§ 1 Definition

Server Actions are a React feature (adopted and extended by Next.js) that allow async functions to be defined as server-side operations while being invoked as if they were client-side event handlers. They are defined with the `'use server'` directive, either at the function level (inline in a server component) or at the module level (in a separate file). Server Actions handle form submissions, data mutations, and server-side logic without requiring a separate API route endpoint. They support progressive enhancement: forms with Server Actions work even if JavaScript has not loaded yet, because the action is invoked via a native HTML form action. Key capabilities include revalidating cached data (via `revalidatePath` and `revalidateTag`), optimistic updates with `useOptimistic`, and cookie manipulation. Server Actions are a core part of the Next.js App Router data mutation model.

§ 2 How Server Actions Work

A Server Action is an async function marked with `'use server'`. When called from a client component, Next.js sends a POST request to a special endpoint generated at build time. The function executes on the server with access to the request context (cookies, headers), databases, and file system. The response can include revalidation instructions, redirects, and updated UI data. This removes the boilerplate of creating a route handler, serializing request data, and handling responses for every mutation.

§ 3 Progressive Enhancement

One of the strongest features of Server Actions is progressive enhancement. When a Server Action is passed to a form's `action` prop, the form works without JavaScript. The browser natively sends the form data to the server endpoint. Once JavaScript loads, the action is intercepted client-side, allowing for optimistic updates, loading states, and error handling without full page reloads. This means your forms work for users with JavaScript disabled, slow connections, or script blocker extensions.

§ 4 Note

Common misunderstanding: Server Actions are not a replacement for all API routes. They are designed for form mutations and server-side logic triggered by user interactions. Public REST APIs that need to be consumed by third-party clients or mobile apps should still use traditional API routes. Another mistake: assuming Server Actions are inherently secure. You must validate and sanitize inputs on the server, just as you would with any API endpoint. The `'use server'` directive does not automatically make your code secure.

§ 5 In code

```tsx
// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { db } from '@/db';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  await db.post.create({ data: { title, content } });
  revalidatePath('/posts');
}
```

```tsx
// app/posts/new/page.tsx
import { createPost } from '../actions';

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Create Post</button>
    </form>
  );
}
```

§ 6 Common questions

Q. Do Server Actions work without Next.js?: A. Server Actions are a React 19 feature, but they require a React Server Components-enabled framework to work. Next.js is the primary implementation. Other frameworks like Remix have similar patterns.
Q. Can Server Actions be called from non-form contexts?: A. Yes. You can call Server Actions from event handlers, useEffect, or any client-side JavaScript using `startTransition` or direct invocation. The form `action` prop is the most common pattern because of progressive enhancement.

Key takeaways

Server Actions are async server-side functions callable from client components, eliminating separate API route boilerplate.
Forms with Server Actions work without JavaScript (progressive enhancement) and enhance with JS loaded.
Always validate and sanitize inputs on the server. Server Actions are not automatically secure.

How Atomic Glue helps

Atomic Glue uses Server Actions to reduce boilerplate in Next.js applications. Instead of writing separate API routes, request validation, and client-side fetch calls for every form submission, we use Server Actions to handle mutations directly. This means faster development, fewer files, and forms that work even before JavaScript loads. It is a standard pattern in our Next.js website development and web application projects.

Get in touch

# Server Actions

Category: Front End (also: Software Engineering)

Author: Atomic Glue Development Team

## Definition

## How Server Actions Work

## Progressive Enhancement

## Note

## In code

## Common questions
Q: Do Server Actions work without Next.js?
A: Server Actions are a React 19 feature, but they require a React Server Components-enabled framework to work. Next.js is the primary implementation. Other frameworks like Remix have similar patterns.
Q: Can Server Actions be called from non-form contexts?
A: Yes. You can call Server Actions from event handlers, useEffect, or any client-side JavaScript using `startTransition` or direct invocation. The form `action` prop is the most common pattern because of progressive enhancement.

## Key takeaways

Server Actions are async server-side functions callable from client components, eliminating separate API route boilerplate.
Forms with Server Actions work without JavaScript (progressive enhancement) and enhance with JS loaded.
Always validate and sanitize inputs on the server. Server Actions are not automatically secure.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/server-actions