I'm planning to release more free crash courses on different topics.
So, I want to hear from you.
Don't worry, It will be completely free on my YouTube channel 🎥 so just hit reply and let me know!
I've been really enjoying building with Next.js Server actions lately.
I love it because my backend code now lives right alongside my frontend code, and my overall development time has drastically reduced.
However, if you're not careful, you can easily waste a lot of time debugging issues 😅.
Today, I'll cover some mistakes I've made alongside things you can avoid with server actions so you can learn from them.
↳ Now, if you prefer watching a video on the same topic then check that out here.
Alrighty, Let's dive in!
To illustrate some concepts in this post, I built a small app called
📈 Stockorama, the name is Inspired by Dollarama 😁.
It allows you to:
Here's what it looks like:
I have a form where you can add a new product to the warehouse inventory.
This data gets saved to a local
inventory.json file that serves as our makeshift database.
|Grab the CodeSandbox Link 🔗
If you want all the code, then grab the Codesandbox link here.
I ran into an issue when trying to show a "Pending" state for the Add button after submitting the form.
I was using the
useFormStatus ↗️ hook but couldn't get it to work right.
Bit annoying but that's how it has to be set up!
When adding a new product, I tried to redirect after saving to the DB and once the user submitted the form.
Didn't work! 👎
redirect() needs to be called outside try/catch.
Easy mistake to make! 😅
Let's say we add a new page with the ability to like the items in the warehouse. The page looks like this.
Now, we want to update the Like Count once the user presses the Like Button shown below.
Here is the thing...
We want the user to see the UI increment change right away as the database operation is in progress.
You can call these optimistic updates!!! ✨
For that, we can use a hook called useOptimistic ↗️.
This "optimistic" approach enhances user experience by providing the appearance of speed and responsiveness, particularly useful in scenarios like form submissions where the UI is updated before the server's response is received.
The mistake I made when using
You need to wrap state updates in
useTransition so UI doesn't freeze up.
Check it out here 👇
I kept running into errors until I wrapped it properly.
😵💫 Easy to miss!
Check it out and subscribe to my channel for more content related to Frontend, Leadership and Career Development. 💪
Was this Newsletter useful?
With your feedback, I can improve future emails. Click on a link to vote:
I hope you have a great day!