How do Server Functions and Actions streamline data fetching and mutations?

Server Functions and Actions let React apps run data fetching and mutations directly on the server, called from client or server components seamlessly.

This removes the need for explicit API routes and boilerplate, simplifying data handling while improving security and performance by centralizing logic on the server. It enables faster UI updates with less client-server chatter and easier state synchronization.

Code

// Server function marked with "use server"
async function saveName(name) {
  "use server";
  await db.users.updateName(name);
  return { success: true };
}

// Client component calling server function as an action
'use client';
export default function NameForm({ saveName }) {
  return (
    <form action={saveName}>
      <input name="name" />
      <button type="submit">Save</button>
    </form>
  );
}