Next.js 16 just dropped and it completely changed how we fetch data with Cache Components.

The new "use cache" directive can be used at the top of your pages, components, or functions to cache data automatically like we covered here.

But here’s the catch 👀, you can’t use "use cache"everywhere.

And that’s why it comes in three flavours:

Today, let’s walk through how we can cache a dynamic function like getRecommendations() which depends on cookies 🍪 and see which caching directive makes sense here.

(I’ll cover “use cache:remote” next week!)

🌀 PS: I tried something new this time - added animated GIFs to visualize caching in action! Do you like them? Click below and tell me what you think 👇

🔥 Love it!

😐 No

Check out the Next.js Hot Tips Course - a free mini course with 10 quick lessons you can complete in just 5 minutes a day.

You’ll learn caching, routing, security, Server Actions, and performance tips all through bite-sized, visual lessons.

✨ Bonus: You’ll also get free access to my interactive Next.js Course Platform + a downloadable guide with all 10 tips.

this magical button will automatically
enrol you in the course!

Next.js 16 is out and it’s a game-changer:

• Cache Components - new data fetching model
• Turbopack is now the default
• File System Caching for faster dev
• Adapters API (alpha) for deploying Next.js anywhere

🎁 Download a Free Next.js 16 Cheatsheet

Everyone’s joking about the new "use cache" directive but Vercel wrote an amazing post on it eexplaining why it exists and the design tradeoffs they explored (like "use workflow").

"use workflow" a new directive that can suspend, resume, and maintain state with ease.

A simple but useful playground for React

Nuqs - a State manager for your URL crossed 1M downloads 🎉

SolidJS crossed 1 million downloads a week! 🎉🚀

ArcRegex is a drop in replacement for new RegExp() with types

Shadcn published the Registry Directory: a list of code registries you can browse and pull code and components from.

We now have Bun runtime on Vercel Functions