Mastering React Server Actions

Server Actions are asynchronous functions that run on the server. They can be defined inside Server Components or imported from separate files, allowing seamless client-server interaction.

"Server Actions eliminate the boilerplate of API endpoints, merging client logic and server operations securely."

1. Defining a Server Action

To declare a Server Action, add the 'use server' directive at the top of the function or file.

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

export async function submitContactForm(formData: FormData) {
  const email = formData.get('email');
  const message = formData.get('message');
  
  // Save to DB or send email
  console.log(`Received message from ${email}: ${message}`);
  
  return { success: true };
}

Use Server Actions for form submissions, state mutations, and server queries without the overhead of REST API routes.