10. Server Actions ("use server"): Type-Safe Mutations without REST Endpoints • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

Pehle form submit karne ke liye:
`Form ➔ onSubmit handler ➔ e.preventDefault() ➔ fetch('/api/user', { method: 'POST', body }) ➔ parse JSON ➔ setState`.

**Server Actions (`"use server"`):**
> React Server par execute hone wale **Type-Safe RPC Functions** jo direct HTML `<form action={serverAction}>` se trigger hote hain!

---

### 2. Real-World Server Action Implementation

```typescript
// app/actions/todo.ts
"use server";

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

export async function createTodo(formData: FormData) {
    const title = formData.get("title") as string;

if (!title || title.length < 3) {
        throw new Error("Title must be at least 3 characters!");
    }

// Direct Database Write:
    await db.todos.create({ data: { title, completed: false } });

// ⚡ On-Demand Cache Invalidation:
    revalidatePath("/todos");
}
```

```tsx
// app/todos/page.tsx (Server Component)
import { createTodo } from "@/app/actions/todo";

export default function TodosPage() {
    return (
        <form action={createTodo} className="p-6">
            <input name="title" placeholder="What needs to be done?" className="border p-2" />
            {/* Works EVEN IF JavaScript is disabled in the browser! (Progressive Enhancement) */}
            <button type="submit" className="bg-blue-600 text-white px-4 py-2">Add Todo</button>
        </form>
    );
}
```

---

### 3. Master Comparison Matrix

---

### 4. Interview Ke 3 Sawal Is Topic Se

1. **Server Actions background me kaunsa HTTP protocol use karte hain?** -> POST request with `Next-Action` header jisme serialized parameters pass hote hain aur RSC payload response me return hota hai.
2. **Server Actions ko Client Components me kaise call kiya jata hai?** -> Direct import karke `startTransition` ya `useActionState` (useFormState) hook ke zariye call kiya ja sakta hai.
3. **Server Action me user authorization check karna kyu mandatory hai?** -> Kyunki Server Actions publicly exposed POST endpoints hote hain; har action ke andar current session token verify karna zaroori hai.

---
**Next Topic:** 11. Form Validation with useFormState, useFormStatus, and Zod Schemas

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track