🍿 Did you know this about Caching in Next.js?
Hey friend,
ICYMI, I've a Black Friday Sale on until Sunday 📣.
You can get 50% OFF using the code 'BLACKFRIDAY' on the below 2 products.
It has been a fantastic week for me. My YouTube channel 🎥 is growing, and I have received great feedback on the Tailwind course and other videos.
Check out the content if you want to become a better Frontend Developer!
Brand new course on Freecodecamp ✨
I also launched a FREE course on Becoming a Great Manager on FreeCodeCamp. I have often referred to Freecodecamp over the years, and it feels like a dream come true to see my content published there.
Our Weekly Snack: Purge Cache in Next.js Server Action 🍿
This week's weekly snack will be on Next.js Server Actions and how to purge cache and redirect the user on the server side.
Server Actions are now in React Canary and ready for frameworks and libraries to adopt! If you want to learn Server Actions in-depth and prefer a video walkthrough, check out this comprehensive video I created.
But if not, keep reading more about purging the cache in Next.js and redirecting the user.
But first, What are Server Actions?
Next.js server actions allow you to write backend code directly inside your React components. This eliminates the need to build a separate API endpoint to handle form submissions, data updates, and more.
Key takeaways:
- Server actions let you run code directly on the server without a separate API.
- Great for form handling, database updates, validation, redirects, etc.
- Scales easily alongside your frontend code
createUserAction is a server action where you parse the formData and insert data into the database.
redirect function 🚀
In server actions, you can perform routing, which is quite neat.
Thanks to the redirect function. You can direct a user directly to another path.
But after re-directing, you may not see the latest data.
You can read more here ↗️
revalidatePath 🚀
To purge the cache data at that specific route, you need to use revalidatePath now. This is what we did with `/posts`.
Latest Frontend News 🤫
Next.js supports Partial Pre-rendering 🔥
Next.js Vercel now has a feature that supports partial pre-rendering, which means you can defer rendering certain parts of your page.
This is awesome for speeding up your site's performance! For example, you can now hold off on displaying comments on a blog post until your reader reaches them. By the time they finish reading, voila! The comments will magically appear, all ready for
⚠️ This feature is experimental.
But check out this demo that Guillermo created. It's really cool.
|
A healthy battle between Next.js and Remix 🥊
Kent C Dodds shares why he won't use Next.js ↗️.
Then Lee Robinson adds a very healthy response: Why I'm using Next.js ↗️.
The Frontend Developers Toolbox 🧰
- Auto detect and View Layout shifts in your pages on Vercel. Check here ↗️
- A script ↗️ to add gravity to any site - it's really cool
- A real reason why you are not a Senior Engineer and want to be, view this video ↗️ here.
I would love to hear from you 🙏
I'm on a mission to cook up some fresh, mind-blowing courses, and I want to know from you:
Just hit 'reply' to my email. Your ideas are like gold nuggets; I can't wait to turn them into something extraordinary.
Big thanks for being awesome🌟.
I hope you have a great day!