Suggest an editImprove this articleRefine the answer for “What are Server Actions?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Server Actions** are a mechanism in Next.js that lets you call server code directly from components, without creating API Routes or manual HTTP requests. **Key point:** Server Actions are meant for user-initiated UI actions and are not suited as a public API or a backend for external clients.Shown above the full answer for quick recall.Answer (EN)Image**Server Actions** are a mechanism in Next.js that lets you **call server code directly from components**, without creating API Routes or manual HTTP requests. Simply put: you call a function - it runs **on the server** - and the result is automatically returned to the application. No `fetch('/api/...')`, no REST, no extra layer. --- ## The main idea Server Actions let you write code in the style of: > "When the user performs an action - > run this server function" And Next.js itself: - sends the data to the server - executes the code - returns the result - updates the interface For the developer, this looks almost like a **regular function call**. --- ## Where they work Server Actions are available in the **App Router** in Next.js. They: - run **only on the server** - do not end up in the client bundle - can use a DB, secrets, the file system --- ## What tasks Server Actions solve ### 1. Handling user actions Typical scenarios: - submitting a form - saving data - updating a record - deleting an item - login / logout Previously, for this: - an API Route was created - a `fetch` was made from the client - the response was handled Now: - a Server Action is called directly --- ### 2. Simplifying the architecture Without Server Actions, the flow looked like this: **Client → fetch → API Route → logic → response** With Server Actions: **Client → Server Action → logic** Fewer files, fewer connections, fewer "jumps." --- ### 3. Security by default Server Actions: - do not expose server code - do not require public endpoints - are protected from being called directly from outside This reduces the risk of: - misuse of the API - logic leaks - accidental access --- ## How they are used conceptually There are two main variants: ### 1) Through forms The form is submitted - the Server Action processes the data. Very convenient for: - CRUD operations - validation - saving data --- ### 2) Through events (clicks, submits) A button → a call to a server function → a data update. Often used together with: - optimistic updates - cache revalidation - updating the page or part of it --- ## Server Actions and caching Server Actions are tightly connected to the cache: - after a data mutation, you can: - invalidate the `fetch` cache - rebuild the page - refresh a specific route This makes the data flow **predictable**: - action → data change → UI update Without manual state management. --- ## Limitations of Server Actions It's important to understand what they **do not do**: - they are not suited for a public API - they are not called directly from external clients - they do not replace a backend for mobile applications They are meant specifically for: - UI actions - logic "next to the interface" --- ## When Server Actions are the best choice Use Server Actions if: - the action is initiated by the user - server code is needed - the result affects the UI - a public API is not needed If instead you need: - external access - integration with other services - a universal endpoint - then API Routes are the better choice. --- ## In short Server Actions are: - server functions - called directly from components - without API Routes and `fetch` - secure and convenient - tightly connected to caching and rendering They bring Next.js closer to the model of **"UI + data + logic in one place,"** without extra infrastructure.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.