Server Actions enable server-side mutations directly from components. Here's how to use them.
Basic Server Action
Loading code block...
With Form Validation
Loading code block...
useFormStatus
Loading code block...
Optimistic Updates
Loading code block...
Revalidation
Loading code block...
Redirect After Action
Loading code block...
File Uploads
Loading code block...
Error Handling
Loading code block...
Inline Server Actions
Loading code block...
Progressive Enhancement
Loading code block...
Best Practices
Security:
✓ Always validate input on server
✓ Sanitize user data
✓ Check authentication/authorization
✓ Use CSRF protection (built-in)
Performance:
✓ Keep actions focused
✓ Use revalidation strategically
✓ Consider optimistic updates
✓ Handle loading states
UX:
✓ Show pending states
✓ Provide error feedback
✓ Support progressive enhancement
✓ Handle edge cases
Organization:
✓ Group related actions
✓ Use consistent error handling
✓ Type action returns
✓ Document complex actions
Conclusion
Server Actions simplify data mutations by eliminating API routes. Use them for forms, mutations, and server-side operations. Combine with useActionState for validation, useOptimistic for instant feedback, and always validate inputs on the server.