Q31: What are React Server Actions and how do they process form data mutations?

Server Actions are asynchronous functions that execute on the server. They can be invoked from both Server and Client Components to perform data mutations, database updates, and revalidate cached data paths using revalidatePath().

Server Action Definition
// app/actions.js
'use server';

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

export async function createPost(formData) {
  const title = formData.get('title');
  await db.posts.create({ data: { title } });
  revalidatePath('/posts'); // Invalidate and refresh cache
}
💡 Server Actions mutate database records and invalidate cached UI paths directly from server functions.
Key Takeaways
  • Annotated using the 'use server' directive.
  • Allows processing form actions directly on server environments without explicit REST/GraphQL API controllers.
Knowledge Check

Which directive marks a function as an executable Server Action in modern React frameworks?