The Four Levels of Caching in Next.js

🚀FREE 2024 Next.js Visual CheatSheet: bit.ly/nextjs-visual-cheatsheet
⭐️ Join the Waitlist for the Exclusive Next.js Workshop: bit.ly/nextjs-workshop2024
#nextjs #react #javascript #typescript #caching
⏰ Timeline
00:00 - 00:29 Intro
00:30 - 1:02 4 Different Levels of Caching
1:03 - 2:31 - Request Memoization
2:32 - 5:10 - Data Cache in Next.js
5:11 - 11:56 - Different Data Fetching
Mechanisms in Data Cache
11:57 - 16:26 - Purge Cache and Revalidate
Data in Server Actions
16:27 - 19:45 - Router Cache in
Next.js
19:46 - 24:22 - Full Route Cache
in Next.js
24:23 - Let’s revisit the Caching
Diagram in Next.js
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 bit.ly/fesnacks
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.
✨ FREE Goodies: kulkarniankita.com/goodies
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: bit.ly/30mins-coaching-with-a...
🐤 Find me here
Twitter: / kulkarniankita9
LinkedIn: / kulkarniankita

[@Kulkarniankita]

So what are some burning questions you have about caching? Or Next in general? Comment below and let me know!

[@alwazkazi1916]

Can we do this without fetch? I'm using axios.

[@Solo_playz]

You're the only one who cover any of the topic from NextJs deeply 🔥
You're 🫵🏼 channel is like a video repentattion document 👀 of NextJs 👏🏼🎉
Thank you ankita madam ❤

[@Kulkarniankita]

Haha thanks! Appreciate it

[@oladimejicoder]

Thank you, this has been very helpful

[@oladimejicoder]

Thank you very much Ankita, this is very helpful

[@Kulkarniankita]

Glad you found it helpful!

[@Arindam_1729]

Really Great Content
Thanks a lot for sharing this

[@Kulkarniankita]

Thanks!

[@Rajputana1974]

Keep growing

[@Kulkarniankita]

Thank you!

[@TriptoAfsin]

Neatly explained
Thanks !

[@Kulkarniankita]

Thanks, glad you like it!

[@user-gp1ls5nf4l]

I learned a couple of new things from this video, Thank you so much for making such content🙏🙏

[@Kulkarniankita]

Of course, thank you! 😊

[@mrityunjaysinha]

Thanks to make it simple to understand 😊

[@Kulkarniankita]

Thanks! 😊

[@MiladJoodi]

Thanks a lot ♥

[@Kulkarniankita]

Of course!

[@olg3089]

Cool stuff ❤

[@Kulkarniankita]

Thanks! 😊

[@garikmelqonyan6011]

Good job!

[@Kulkarniankita]

Thanks!

[@kamrant8915]

Great explanation. Thanks.

[@Kulkarniankita]

Glad it was helpful!

[@clevercoder2609]

Nice explanation❤

[@Kulkarniankita]

Thanks!

[@asfandyar8088]

Thanks Mam you explained it very nicely.

[@Kulkarniankita]

Glad to hear that! Thanks

[@carlosterrazas8913]

When you do a fetching or a prism within a server actions, is it cached?

[@sai7743]

Hi Ankita do on the loading with template tsx when refresh the page loader to apply and also on page navigation also I am eagerly waiting for this to implement in my project.I like ur way of explanation and I am now ur subscriber

[@Kulkarniankita]

Thanks!

[@hareshlakhwani4721]

Great video yesterday only I started learning Next.js but as sr developer I have one big question how does Next.js works under the hood what exactly it’s doing if you can make full in depth video in that would be helpful

[@Kulkarniankita]

Thanks!

[@pavankarthik699]

Hey Ankita, Can you make a video on how to properly and securely make api calls in either React or NextJs which is to be used for production.

[@Kulkarniankita]

Hey check the data fetching section in the Nextjs crash course on my channel. I show how you can do that!

[@pavankarthik699]

@@Kulkarniankita Thanks for the reply, My bad I haven't seen the video yet, and kept the tab open to watch it later, But this came to my mind and posted the comment. I have some other doubts as well in frontend development for suggestion, where can I post Ankita?

[@rohitkochikkatfrancis]

Hey ankita, i am very much confused with using the USE SERVE and USE CLIENT and mixing and matching RSC with server actions, etc.
Could you please make a video to cover all that ?

[@Kulkarniankita]

That’s a good point, yeah I’ll consider it!

[@Beast80K]

*Thanks* alot for this simplified and detailed explanation.
Respected Ma'am,
What happens when there are 2 users, hiting the API 1st user gets new data, but what happens if 2nd user comes after revalidation period ??

[@Kulkarniankita]

First user gets stale data but kicks off a request to get fresh data so that the 2nd user gets fresh data!

[@Beast80K]

@@Kulkarniankita Thankyou Ma'am for answering this, but NextJS didn't behave like this. I had an external API which my NextJS route handler calls to get data, but despite external API returning 503, 429, etc. after revalidation period NextJS returns old cached data. I have more details about this question on StackOverflow, search for question *NextJS 14 returns old cached data even if external API returns error on revalidate* to get more details.

[@hossainopi]

Any tips for speeding up next.js image loading? Tried various optimizations like sharp, resizing, and quality adjustments but still facing slow loading times despite small image sizes (37kb). Any suggestions?

[@Kulkarniankita]

Hmm Did you try caching on the CDN?

[@pushkarkathayat7893]

which soft you use for recording?

[@Kulkarniankita]

Hey I’m using Premiere pro!

[@sai7743]

Here in nextjs we can use only Link tag there is no use of anchor tag in nextjs is it correct

[@Kulkarniankita]

You can use anchor tag as Link uses anchor tag under the hood but you won’t get a bunch of capabilities like prefetching etc. if you don’t.

[@sai7743]

@@Kulkarniankita understood I need a clarity on initially I run nom run dev a white space appearing and displaying the UI so how to handle and pls explain about loaders spin every page routing

[@PicchiChannel]

[@Kulkarniankita]

👋