STOP Making These Server Action Mistakes (and How to Fix Them)
Server actions are one of my favorite features in React and Next.js. They abstract away the complexity of standard APIs and help speed up my dev workflow. But with abstraction comes a lot of hidden pitfalls. Fetching data inside a server action technically works, but you shouldn't do it. Using useState for pending states doesn't behave how you'd expect. Simple auth logic directly in the server action is also not ideal, it's better to handle that in your data access layer. Yeah, it's a bit more complicated than it seems. But no worries, in this video I'll walk you through the most common server action mistakes and how to fix them.
🔒 Get started with Kinde: https://dub.sh/xeU8r3v
📸 Screen Recording Software: https://dub.sh/eDa47SO
🚀 Checkout Cal for Free: https://dub.sh/FAuffAy
🌍 My Website: https://janmarshal.com/
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: [email protected]
Timestamps:
00:00 Intro
00:51 Codebase Introduction
02:44 Mistake No. 1 – Public Endpoints
05:30 Mistake No. 2 – Pending State
09:40 Mistake No. 3 – Auth
15:25 Mistake No. 4 – Data Access Layer (DAL)
17:40 Mistake No. 5 – Incorrect Error Handling
22:45 Mistake No. 6 – Database Transactions
25:00 Mistake No. 7 – Fetching Data