profile

Ankita Kulkarni

🍿 3 New Flavours of Caching You Didn’t Know Existed in Next.js 16

Published 4 months ago • 2 min read

Hey Reader,

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.

If you'd like, you can watch the talk here!

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 👇

🔥 Love it!

😐 No

🎁 Want to level up your Next.js skills the fun way?

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!

🚀 Latest Frontend News

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

What do you think of today's Newsletter? Simply click on one of the links below.

🔥 Love it!

😐 It’s okay

👎 Not good

​
All past newsletters can be found here.

You can email me at me@kulkarniankita.com to advertise/sponsor the newsletter.

For those curious, I write all my emails using Convertkit.

Ankita Kulkarni

Educator | Developer | Leader

Join 9200+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!

Read more from Ankita Kulkarni
You’re Suspending the Wrong Component

Hey Reader, There are thousands of you going through Modern Full Stack Next.js Course so wanted to be grateful here for your support. Just as a thank you, there is something big dropping for you. It will only last 24 hours ⏰ so keep an eye out for my email next week. Let's dive in! PRESENTED BY CLERK Instead of your coding agent guessing how auth works, you can now install specialized Clerk knowledge directly into it. Introducing Clerk Skills One simple command $ npx skills add clerk/skills...

12 days ago • 2 min read
Next.js bundle analyzer

Hey Reader, This week, we're putting your Next.js app under the microscope, what's slowing it down? This along with the latest news, can AI really debug complex React/Next.js bugs? How OpenClaw and Anthropic are enabling AI collaboration, 3 New Coding Models dropped and more. Let's dive in! 🍿 Our Weekly Snack: What's Really Slowing Down Your Next.js App? Have you ever wondered why your Next.js app feels sluggish or takes forever to load? 🐌 The new experimental Bundle Analyzer in Next.js 16.1...

19 days ago • 1 min read
git worktree

Hey Reader, A lot of you have been asking me how I’m able to stay so productive and get a lot of work done so I finally broke down my exact workflow and setup in a short video. 🍿 Our Weekly Snack: Run Multi Agents stress free with Claude Code Git work trees let you check out multiple branches at the same time each in its own folder all backed by the same repo. Instead of one working directory and constant branch switching, you get parallel workspaces. Each work tree has its own isolated...

25 days ago • 1 min read