Next.js App Router Caching: Explained!

0:00 – Introduction
0:24 – Demo
1:20 – Caching overview
2:06 – Foundations
6:10 – Static: fetch()
7:03 – Dynamic: fetch() without caching
7:37 – Static: unstable_cache()
9:37 – Dynamic: Direct database calls
10:07 – Revalidating static data
12:32 – Revalidating from external sources (webhooks)
14:12 – Revalidating static data with ISR
15:28 – React cache()
16:40 – App Router and Pages Router differences
17:52 – Example: Forms with useFormState & useFormStatus
19:33 – Using forms without JavaScript
19:59 – Exploring the network tab for a Server Action
20:49 – Example: Optimistic UI
21:45 – Preventing navigations with pending mutations
22:34 – Progressive enhancement
23:39 – Partial Prerendering
24:56 – Conclusion

#nextjs #react

[tom.watkins]

I love next but the decisions around caching rank among the worst. You should have just left the fetch API alone (tRPC and anything else that used it immediately had issues) and caching by default was always going to something that many Devs struggled with. The new unstable cache function is how it always should have been done.

That all being said, it's great to see people's feedback being taken seriously and things changing to reflect this 👍

[JaredFL]

Next 20 will include playing the Nextjs theme song on every page load but you can opt out using unstable_loadjQuery to load jQuery into the page which will disable the song.

[rmrglr]

All of this should be opt-in, or at least give us a next.config.js option to disable caching all over the app. Default caching behaviour that is so aggressive, that it decides to make fetch calls in your API routes static at build time, it's mind-boggling.

[BBxx]

I said it once and I ll say it again. Caching should be opt in by default since it is an intentional performance optimization tool and not some magic thing that should be applied based on what is used where. The intention is good but sometimes trying to automatically optimize everything causes more issues than it helps - the amount of bugs that resulted from this complexity should be very telling.

Focus the energy to educate the users how they can cache data and pages for optimization instead of trying to explain the default complex caching behavior that requires a lot of research for new users.

If the users need to keep asking why things behave the way they do, then there is a major flaw with the design.

[Flash]

Happy to see more deep-dive explainers on how caching on Next.js works. I'm one of the few people that actually don't mind having caching on by default. The only thing I dislike from the current behavior is patching fetch to work differently to how users and library authors currently use it. I'm looking forward to the improvements the Next.js Team will be making in this regard.

[ryzzlas]

Am at 6:40 now at the video. And I really would like to have much more tools to debug caching. Especially, when deployed.
Because IMO the defaults are good and the idea behind the caching strategies of Next.js too. It's just lacking transparency, what's happening at any given time.
One idea would be to have a secure API route where we can inspect, what asset is currently cached for a given active deployment, what pages depend on it, etc.

[yoJuicy]

That was so helpful! Would love a weekly video series like this to help people out with intermediate/advanced 13/14 stuff. You guys are amazing.

[shao]

I love this style of complete transparency by vercel and their openness to feedback. I'm just learning Next.js right now and these videos are very helpful explaining the more tricky bits. Thank you and keep up the good work.

[Grimz]

Really helpful to see some official examples in video form explained!

[sulavbaral]

it would be good if we could get an entire video for how to create a nextjs app like its meant to from the vercel team
something like a real world application like ecommerce or anything else would be great

[sean_reyes]

I kinda like to control caching on my own, so I want to entirely disable caching by NextJs... can I do that?

[axlYT]

imo it would be better if it does not cache by default and u need to explicitly specify this kinda of doCache(). Idk it feels more natural to me this way then always getting confused by all stuff.

[_evillevi]

unstable_cache just saved my life, thank you, kind vercel dev of the tube

[syedazeemjaved]

Great job in the first part of the video to highlight that caching does not work (as usual) when we are on a dev server, I remember that this got me scratching heads for quite sometime when I started with the App Router.

[leerob]

Let me know what questions y'all have, hope this helps!

[WesBos]

this cache API is fantastic - big fan of it! Agree that the cache key + tags are a bit confusing, I'm a big fan!

[luisandrade]

Is there a difference between using and “export const dynamic = ‘force-dynamic’;” ?

[yudistiraashadi]

Amazing video, Lee! Coming from PHP world, I really like the idea of React having RSC and moving to server more simply because there will be less thing to keep track on. I also appreciate Next.js and React team focus more on stability for this past months, keep up the good work!

[wintercounter]

Next.js's default-on caching is so good, that I need monkey patching scripts on several projects for 3rd party libraries using fetch to fix the bugs it's causing. At this point, I don't care, it's just yet another hack/workaround I need to do while using Next.

[Thikondrius]

It seems that Next.js is listening to the community. Indeed the fetch override is a red flag, but you seems that have listen to the community which is great. It should be removed because core function should not change.

Also, yes indeed cache is agreessive, probably to much. We understand why you did that, it's super performant, but not easy to work with as dev. Its easier to add cache optim when we need it than removing it when we don't.
Otherwise we are forced to understand all the default cache mechanism even if we don't need them.

I think the community is pretty much unanimous about that. We count on you to keep this framework amazing and easy to work with 👍
Thank you for this very well explained video