What are Server Actions

• Directive: "use server" at the top of an async function
• Form: <form action={submitAction}> — works without JS
• Optimistic UI: useOptimistic hook for instant feedback
• Revalidation: revalidatePath() / revalidateTag() — invalidates cache
• Security: always re-validate session + authorization inside the action (don't rely on page guard)

"use server";
export async function createPost(formData) {
  const session = await auth();
  if (!session) throw new Error('Unauthorized');
  await db.post.create({ data: { title: formData.get('title') } });
  revalidatePath('/posts');
}

• RSC
• CSRF

Server Actions are a powerful feature introduced in Next.js 14, allowing developers to create asynchronous functions on the server that can be invoked directly from React components. This eliminates the need to create separate API routes for handling data mutations, streamlining the development process.

To define a Server Action, you simply create an asynchronous function in a component file and annotate it with the "use server" directive. This directive indicates that the function should run on the server rather than the client. For example:

async function handleSubmit(data) { /* processing logic */ }

By using Server Actions, developers can leverage progressive enhancement techniques, as these actions will function even if JavaScript is disabled in the user's browser, thanks to native form submissions.

Server Actions also enhance performance by reducing the amount of client-side code, leading to faster load times and improved user experiences. Since the server handles the logic, it can be optimized for speed and efficiency.

Implementing Server Actions in Next.js involves a few straightforward steps. Below are practical examples that demonstrate how to set up and utilize Server Actions in your application.

1. **Define a Server Action:** Create a new file, for example, app/actions.js, and define your Server Action:

export async function saveData(formData) { const response = await fetch('/api/save', { method: 'POST', body: formData }); return response.json(); }

2. **Use the Action in a Component:** In your component, you can call this action directly:

import { saveData } from './actions';

3. **Form Implementation:** Create a form that utilizes the Server Action:

<form action={saveData} method="POST"> <input type="text" name="data" /> <button type="submit">Submit</button> </form>

This setup allows you to submit the form directly to the Server Action, providing a seamless experience. The action can handle data processing and responding without needing to manage API routes.

Server Actions present several advantages over traditional API routes in Next.js applications. Understanding these benefits can help developers make informed decisions regarding architecture and performance optimizations.

• Simplicity: Server Actions simplify the codebase by removing the need for separate API routes. Instead of routing requests through a RESTful API, functions can be directly invoked from the component.
• Improved Performance: By reducing the overhead associated with API calls and client-side fetching, Server Actions can lead to faster response times and a more responsive user experience.
• Progressive Enhancement: Since Server Actions can work without JavaScript, they enhance accessibility and usability for users with JavaScript disabled or on slower connections.
• Less Boilerplate: Developers can avoid writing repetitive code associated with defining and managing API routes, allowing them to focus on business logic and functionality.
• Better Error Handling: Server Actions can handle errors more gracefully by providing server-side validation and feedback before reaching the client.

In summary, Server Actions offer a modern approach to handling server-side logic in Next.js applications, making them a preferred choice for many developers looking to enhance their workflow and application performance.