What is Server Actions?

Server Actions in Frontend Accelerator are asynchronous functions that execute on the server, allowing you to perform data mutations directly from forms and Client Components without creating API routes.

Defining server actions:

'use server';

export async function createProduct(formData: FormData) {
  const name = formData.get('name');
  const price = formData.get('price');
  
  await db.addProduct({ name, price });
  
  revalidatePath('/products');
}

Using in forms:

<form action={createProduct}>
  <input name="name" />
  <input name="price" type="number" />
  <button type="submit">Create</button>
</form>

Using in client components:

'use client';
import { deleteProduct } from './actions';

function DeleteButton({ id }) {
  return (
    <button onClick={() => deleteProduct(id)}>
      Delete
    </button>
  );
}

Key benefits:

• No API routes required: Direct server-side mutations
• Type-safe: Full TypeScript support with validated inputs
• Progressive enhancement: Works without JavaScript
• Automatic Revalidation: Built-in cache invalidation
• Security: Runs on server with authentication context

AI-native pattern:

Server Actions follow clear conventions:

• Marked with 'use server' directive
• Accept FormData or serializable arguments
• Return serializable data or void
• Stored in actions/ directory for organization

Common patterns:

• Form submissions without API routes
• Optimistic updates with useOptimistic
• Background mutations with useTransition
• File uploads with server-side processing

Frontend Accelerator uses Server Actions for all data mutations, eliminating boilerplate API route code.