Server Actions w Next.js — co to i jak używać w 2026

Server Action to async funkcja JavaScript / TypeScript oznaczona dyrektywą `'use server'`. Wykonuje się ZAWSZE na serwerze (Node.js runtime lub Edge), nigdy w przeglądarce. Można ją wywołać z dowolnego komponentu React.

Pod spodem Next.js generuje endpoint POST z unikalnym ID dla każdej Server Action, zarządza serializacją argumentów (z React → JSON → server), deserializacją odpowiedzi (server → JSON → React state), revalidation cache (`revalidatePath`, `revalidateTag`).

Z punktu widzenia developera: piszesz funkcję jakby była lokalna, ale wszystko po stronie HTTP zostaje obsłużone automatycznie. Type safety end-to-end (jeśli używasz TypeScript) — argumenty i return type są takie same po obu stronach.

Server Actions ZAWSZE są POST requestami. Nie używaj ich do GET / read operations — do tego są React Server Components (które renderują dane przy SSR/SSG bez round-trip).

**Form submissions** — najbardziej oczywisty use case. Form akcja `<form action={mojaServerAction}>` wywołuje akcję z FormData jako argumentem. Bez API route, bez fetch, bez state management dla loading. Tak działa formularz kontaktowy na marcinsiwonia.pl — Server Action wysyła mail przez Resend.

**Database mutations** — INSERT / UPDATE / DELETE. Wywołujesz Prisma / Drizzle / raw SQL bezpośrednio w Server Action, bez tworzenia REST endpoint. Standard w tworzeniu aplikacji Next.js z bazą Postgres.

**Third-party API calls wymagające secret keys** — wysyłka maila przez Resend/SendGrid, płatność przez Stripe API, integracja z CRM. Klucze API w server-only env vars, nigdy nie wyciekną do bundle. Dla integracji bardziej złożonych: Next.js software house.

**Cache invalidation** — po mutation `revalidatePath('/products')` lub `revalidateTag('products')` automatycznie odświeża strony statyczne ISR.

**Optimistic updates** — z `useOptimistic` hook React 19 robisz natychmiastowy update UI + Server Action w tle. User widzi zmianę instant, nie czeka na network.

**Read-only operations** — to robota React Server Components (komponenty async fetchują dane przy SSR). Server Action dla GET = zła praktyka, marnuje round-trip. Pełny przewodnik strategii renderowania: Server-Side Rendering — co to i kiedy używać.

**Public API dla third-party** (Twoja aplikacja jest backendem dla cudzych frontendów) — Server Actions to internal API Next.js, nie REST. Wystaw klasyczne API routes (`app/api/.../route.ts`).

**Long-running tasks** (reportgen, video processing) — Server Action ma timeout 10s na Vercel free, 60s na Pro. Dla długich tasków: queue (Inngest, Trigger.dev, BullMQ) + webhook po zakończeniu.

**Streaming responses** (chat z AI, large data download) — Server Actions zwracają jeden response. Dla streaming: API routes z `Response` body jako stream.

**Mutations wymagające specific HTTP method** (PUT, DELETE, PATCH) z third-party tooling — Server Actions to zawsze POST. Dla compliance z REST conventions: API routes.

**ZAWSZE waliduj argumenty na serwerze.** Klient może wysłać dowolne dane. Użyj Zod / Valibot / Yup do schema validation:

Przykład: `const schema = z.object({ email: z.string().email(), name: z.string().min(2) });` na początku Server Action, potem `schema.parse(data)` — rzuci wyjątek jeśli dane niepoprawne.

**Sprawdź autoryzację.** Server Action nie ma automatycznego auth check. W każdej akcji wymagającej autoryzacji: `const session = await auth();` na początku, throw error jeśli brak.

**Rate limiting.** Server Action dostępne dla każdego użytkownika, można je spamować. Użyj Upstash Ratelimit lub własny rate limit (Redis, in-memory dla małych projektów).

**CSRF protection** — Next.js automatycznie chroni Server Actions przez Origin header check (od 14.1+). Możesz dodać własny token jeśli wymagasz extra warstwy.

**Nigdy nie używaj userInput w SQL bez parametryzacji.** Prisma / Drizzle / `$queryRaw` z placeholders — ZAWSZE. Inaczej SQL injection.

**Form action z FormData** — najprostszy pattern. `<form action={createUser}>`, w akcji `const name = formData.get('name')`. Działa nawet bez JavaScript (progressive enhancement).

**Form action z React 19 useFormState** — dla server-side form errors widocznych dla usera. `const [state, action] = useFormState(createUser, { error: null })`. Renderujesz `state.error` w komponencie.

**Optimistic update z useOptimistic** — dla UX gdzie ważna jest natychmiastowa odpowiedź. `addOptimistic(newItem)` przed Server Action, jeśli się nie powiedzie — rollback z error message.

**Server Action wywołana z client component** — nie tylko z `<form action>`. Możesz wywołać jak normalną funkcję: `<button onClick={() => deleteItem(id)}>`. Server Action wykona się po POST.

**Revalidation po mutation** — `revalidatePath('/products')` w Server Action, automatycznie odświeża cache dla tej ścieżki. Dla wszystkich stron z określonym tagiem: `revalidateTag('products')` + `fetch(..., { next: { tags: ['products'] }})` przy fetchu.