Server Actions એ async functions છે જે સર્વર પર ચલાવવામાં આવે છે પરંતુ તમારા components માંથી સીધો call કરી શકાય છે (forms અને event handlers સહિત) — તમને mutations (create/update/delete) કરવા દે છે manually API endpoint બનાવ્યા વિના. તમે તેમને "use server" directive વડે ચિહ્નિત કરો છો.
;
{ revalidatePath } ;
() {
title = formData.() ;
db..({ : { title } });
();
}
// app/todos/page.tsx — wire the action straight to a form
import { createTodo } from "./actions";
export default function Page() {
return (
<form action={createTodo}> {/* no onSubmit, no fetch, no /api route */}
<input name="title" />
<button>Add</button>
</form>
);
}
form નો action Server Action પર નિર્દેશ કરે છે. submit પર, Next.js FormData ને સર્વર પર મોકલે છે, તે function ને ત્યાં ચલાવે છે, અને અસરગ્રસ્ત pages ને revalidate કરી શકે છે — બધું કોઈ API route અને કોઈ client-side fetch code વિના.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts handlers અને client fetches લખ્યા વિના mutations.revalidatePath/revalidateTag mutation પછી cached data ને તાજો કરે છે.⚠️ Server Actions are PUBLIC endpoints under the hood — always validate input and
check authorization inside them, exactly as you would a real API route.
Server Actions સામાન્ય mutation stack (API route + client fetch + state handling) ને એક single server function માં તોડી દે છે જે તમે સીધો call કરો છો — App Router નો form અને data changes માટેનો જવાબ.
તેઓ boilerplate ઘટાડે છે, progressive enhancement સક્ષમ કરે છે, અને caching/revalidation સાથે integrate કરે છે, પરંતુ (કોઈ પણ endpoint ની જેમ) તેમની અંદર validation અને auth checks ની જરૂર છે.