React › Server Actions & Data Mutations

What is a simple real world example of using a server action for a common form, like a newsletter signup?

Beginner

Answer

A newsletter signup form can call a server action directly when submitted, which saves the visitor's email address to a database on the server, without the developer needing to write a separate API route or manual fetch call just for this one simple task.

async function subscribeToNewsletter(formData) {
  'use server';
  const email = formData.get('email');
  await db.subscribers.create({ email });
}

<form action={subscribeToNewsletter}>
  <input name="email" type="email" placeholder="Enter your email" />
  <button type="submit">Subscribe</button>
</form>

Real-world example A company blog adds a simple newsletter signup form at the bottom of every article, saving each new subscriber's email directly through a server action without building any extra backend code just for this feature.

Common follow-ups: How would you show a thank you message after the visitor successfully subscribes?;What validation should be added to prevent invalid or duplicate email addresses?

Forms: Controlled & Uncontrolled Components;Email & Notifications