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.