🍿 3 New Flavours of Caching You Didn’t Know Existed in Next.js 16
Hey ,
I had the incredible opportunity to speak at the official Next.js Conf!. It’s been 2.5 years since I went full-time as a Tech Educator, and this moment truly feels like a milestone.
In my talk, I share how I built a custom course platform using Next.js (the same one that powers Modern Full Stack Next.js Course) along with the lessons and challenges I faced along the way.
Weekly Snack: Caching Patterns for Dynamic Components in Next.js 🍿
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:
→use cache: allows you to mark a route, React component, or a function as cacheable
→use cache: private: allows you to use runtime APIs like cookies, headers, or search params and cache them
→use cache: remote: enables caching of shared data in dynamic contexts
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 👇
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.
