Next.js App Router Caching: Explained! 

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 👍

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.

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.

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

(unstable_)cache is only necessary if you need to dedupe a request, right? E.g. between the Page and generateMetadata. It is not required to cache a page statically. That happens automatically at build time even if you don't wrap your DB calls.

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.

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.

Love your content. Next Js team is so awesome! Keep it up!

Thanks! Awesome video! I want more content like this about next.js

The video we all wanted, thanks and great job!

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.

That next config option for logging is very useful, thanks!

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.

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

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.

amazing work guys I really love nextJS and what you do so keep it up and don't change the app router in the feature let the base change it a little maybe but don't mess with it i love it

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

Thank you Lee, these are so helpful

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

Wow amazing please continue!

I will love to see a video about resusable client and server action validation/error handling pattern. That's where some of these server action patterns falls apart when I'm developing and I haven't found a better solution.

Great examples. how would you recommend to go about caching when there are cookies in the request specific to a user? Currently if you cache an endpoint that has headers, it memorizes with the headers specific to a users session. Would you recommend to still cache? Which would be the best pattern?

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

Insightful and helpful explanation, Lee!

lots of fun ideas, thanks!

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.

After using next for years I recently started using the app router, but the feature I was hoping to understand the most is how to revalidate pages in SSG after a set period of time when using app router. This feature is great for projects using quota based apis and services for example.

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!

Instead of unstable_cache I've been using (and teaching) React's cache

Great video like always Lee. But i have some feedback around caching. Right now we have a lot of ways on how to handle caching in Nextjs App Router, but i think you guys should simplify that to a single function + single page/layout/route-handler config. Let me explain. //Function/Component cache config Instead noStore() or revalidateAfter(), what about a single configCache() or noCache() function that you can use to wrap any Component/Function and config cache of that. //you could change the name, it's not the point. configCache(async ()=>{ // config cache everything here for example a fetch call or db query }, { time: 100 or 0 //others config if you want }) I really don't like the noStore() approach of a random function on my component that break the cache. And in my opinion everything could be easy if you start with no cache and allow cache everything with functions like this. But i also find that the current approach could work, but with better and less APis around caching and config. //Page/Layout/Route-Handler cache config Instead of const dynamic = 'force-dynamic'; const revalidate = 0; what about export config: NextConfig = { cache: { dynamic: "force-dynamic", revalidate: 0, // or serverCache: 10, clientCache: 5, } } The point it's a single object with a type provided by Nextjs, right now route-segment-config have 7 config objects all of them with they own values, so it's really hard to remember all those. I really thing you guys should unifed all in one single object, with a Type + JSDocs with explanations. Also it's a single object that people can learn easly and autocomplete they way, instead of learning two or more config. Yeah, i know you could remove the need of the type with Typescript Plugins, but you should always provide them because what about people don't wanna use ts plugins or wanna be more explicit. For example IntelIJ don't work well with Typescript Plugins. All of this it's only feedback, you could change it like you want. But my point it's that if you should reduce the learning curve byproviding to the developers less API's to learn.

Amazing video. All my confusion is gone now

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.

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

The development of NextJs is just super confusing. Seeing a video like this makes it super clear. It's just a lot of "we've added some custom magic here, ah and this part is also just some custom magic, ah and this part is custom magic ...". I've been doing react for years and I have to watch and read everything 5x before things start to make sense. What's the big win to be had by adding all this complexity? Marginally more control compared to the 'pages' router? I really applaud everyone who is trying to make sense of all this complexity ... I'm just shaking my head over this ...

Great video and well explained thanks.

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.

love those little demos .... really valuable

Is there a difference between using “noStore()/cookies()/headers()” and “export const dynamic = ‘force-dynamic’;” ?

Great video🎉!

Would it be possible to explain why the defaults were set so ‘aggressively’ for lack of a better word? Do more complex apps benefit in a way I’m not seeing? Or does it have something to do with how Vercel hosts NextJS apps perhaps? I’d love to know!

I like it, your starting to match the features of RTK. Do you have any plans to allow transforming the response?

I like the logging feature in 6:30 so much!!!

Hi Lee. I am not really professional, but next js's caching feature seems like changing a lot of stuff for me (especially avoid using bunch of libraries like redis). However, I am still didn't fully understand the caching yet. In my case, I have CMS kind of admin dashboard with landing page website (all in one next js project. no APIs). there is no external source to change data from database. Can I use caching everywhere and just revalidate when there data changes or adds new data? Am I right?

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

Is there a way to implement a polling system directly using Next.js that could be combined also with revalidate function to get fresh data every certain amount of time?

awesome video! thank you. i have a question though... i think i can see the fetch cache and unstable_cache as alternatives for getServerSideProps and getStaticProps by setting the config like cache: 'no-store' and revalidate: x. i can using them to cache data between requests. also i can use react cache to dedupe running functions and ... in a single request. it seem like memoization. so what if i want using react cache and nextjs cache altogether??

If I'm building a page that is mostly a "dashboard" for logged in users, is there any point in using the App router? Should I use Nextjs 13 instead? Or something else entirely..?

Great video! where can i find the static pages after building?

@leerob For the `unstable_cache` method, is it possible to turn on logging to see when the cache is being hit?

Would be great to see these demos when doing self hosting instead of vercel because caching/on-demand ISR is a mess when self hosting.

Going from straight forward concepts you can learn and study like SSG, ISR, SSR, CSR to this intrinsic knowledge caching hurts my brain

2 questions: in the docs it says fetch is auto opted out if you use the Authorization header and some other criteria I don’t fully understand. Is there a way to turn this off and stay opted in to caching while using the Authorization header? Imagine a private API you need a token for. The token doesn’t change, but all the fetch reqs are auto opted out. The other, by using partial pre rendering, can you use the dynamic function “cookies” and NOT have the entire route be opted in to dynamic rendering? An example, a static page of products, with a singular component that fetches the products a user has “liked”. The products don’t change, but reading the cookie to show the products the user has liked would opt the entire route into dynamic rendering. Can this be avoided?

This is super helpful! I would love an expanded discussion on how caching works with authentication. Can I cache resource data that is behind authorization? Then, by extension, if two people have access to that same data, can they both be made to hit the same cache?

I would like to see a video this about error handling too.

when the unstable_cache from next becomes stable, both react and next cache wrappers will be imported as "cache"? if so, whats the best practice there, in case you need to use both cache functions? Or is it better to use next's version? :c

Could you make a video explaining the difference between React cache, and Next unstable_cache? Found that part a bit confusing... Is React cache something that Next uses under the hood and I should stay away from, or are there cases where I should prefer React cache over Next unstable_cache? 🤔

Wow, the importing cache from react and noStore from next seems like a mind boggling amount of complexity

Is there any difference between getStaticProps(), and doing an static fetch?

I think I understand the unstable_cache() function but does this only apply on a dynamically rendered page? What if you have a statically generated page on a production build that uses a database call wrapped in unstable_cache() with the tag 'page'. If a server action is run that calls revalidateTag('page'), will that statically generated page be rerendered?

we're going back to pages router with this one 🔥🔥🔥

Very interesting! Two questions come to mind about partial pre-rendering. #1 How do we deal with nounces? #2 If we want to pre-render pages that are not accessible to all users, is there a hook to run a security check before serving the page? Thank you

How do you configure a CDN to work with Next.JS caching? Or best, how do you configure Next.JS to work with CDN caching. Are there any gotchas or configurations we need to consider on the CDN or Next.js level?

thank you legit video we are still here and AI has not replaced us yet

I think visually showing that there's a cache hit would go a long way to determine why something isn't doing what it's supposed to. For me at least this would be enough to go and read up what happens. The caching by default is disruptive for many it seems, but I happen to like the idea - performance is key these days and you get unintentional benefits from this compared to the opt-in approach.

In the fetch chapter, GETs are cached, but is this Data Cache, or is Data Cache enabled even though it is not deployed in Vercel?

Great video, could you talk about layout components as well ? As far as i know the fetching and caching behavior is a bit different.

I have one question when we work in next js and node js then nodejs devloper send token in response then we can get it in client side then how we can protect page in middleware using server side because next js middleware run on server

how to enable that logging which shows that a route was dynamically built?

Love Next and even more the new functionalities that App Router introduces but with the time has been clear that you choose the wrong default related to caching, I mean have caching in the framework is great but It should have the opposite defaults, no caching and then when adding revalidate = false -> static, revalidate = # -> ISR, etc… same for other apis like fetch. And for other promises rely on react.cache or next/cache -> cache() wrappers. Or should be just possible to select default behavior on next.config. That unstable_noStore is a really ugly API that shows how wrong default was selected; also being forced to think almost everywhere if you need or not revalidatePath / revalidateTag functions (which are great but shouldn’t be the default) is counterintuitive, you should be using them only if you are consciously caching. For code readability would be more clear and intuitive that if a function is wrapped with cache then is cached if not is not. Same for fetch, etc. now we are in a strange mix where fetch and many other things are is cached but for others you have to manually cache e.g. db queries (which is clear but fetch is not). I know the purpose was good but the end result creates more issues for the dev that what resolves, if I don’t add caching my app might consume more resources but stills working just as expected, them on the analytics tools, profiler or whatever tool you check what happens, but the other way as is now is really hard to know why something doesn’t work. Also many apps already has caching layers with Redis or so and as caching is default now you have two caches to manage and is hard to know which is causing the issue. Also makes hard to use other “frameworks” on the API routes, is great all the WebAPI WinterCG Request/Response things but if I want to mount a Hono / Elysia / Hattip / HeadlessCMS /Proxy-Server instance on them you’re never going to be sure if Next cache is interfering with them.

what if I want to tag a cached function? can I use both unstable_cache and cache together?

Can we use "force-dynamic" route segment to opt into dynamic routing? It looks much cleaner than calling noStore

How can cache pages with dynamic routes? Like I have a page (app/[lng]/product/[id]/page.tsx). Is there any provision to cache such pages?

Lee. Is caching worth for small to medium project?

do weekly videos on intermediate/advanced topics that are most common use cases in next 13/14

why at min 9:40 (the request) of the direct call of the database not cached, while at min 18:15 (the request) is cached, is it because of the pure SQL vs ORM ?

Can noStore() be used in production like next cache?

revalidateTag looks promising, but still has a confusing invocation signature, should i create a "tag" and re-use later?

How does unstable caching work? As far as I understand, React.cache memoizes a function for a single request. Does unstable_cache memoizes in the server as well as cache the result for future requests?

What might be the best way to do Island Architecture in Next.js ?

More terminal tooling and indication would be great. I feel like we should have better tooling for all these new concepts, specially during runtime.

Thanks

Usually if I want to opt out cache for a call I go with cache: no-store in the options or just invoke the headers() or cookies(). One little dirty trick, is just to invoke headers() in the layout,and that will opt out your cache for all the children pages. Not ideal, but it works. I still don't get the benefits of using startTransition, though. Docs doesn't seem to show anything related currently and when I revalidate I got the updates of the page anyway. What's the value? Could someone help me to understand that?

Is it possible to control caching better when using stripe webhooks?

I just want to ask for adding setting that disables all cashing and gives apportunity to add cashing where I want. It is strange to disable cash everywhere. All peaple in comments ask you to change it.

Is there a link to the demo source code?

ok, so i have this super strange problem with cache on amplify, not sure why, and i had it also with next 13. when i build the app it creates static sites based on content provided by fetch. i tried setting revalidate in path (layout) as well as in fetch functions that grab articles, i also tried unstable_cache aproach as presented here, i upped node to 20 on amplify image as well. i ALWAYS get the same problem: the page is served with the content from build time, when refreshed (sometimes few times) it loads updated content, but then after revalidation period i goes back not to last cache but to build time. does anyone had similar issue? what is going on here?

When your seeing the cache hit at 06:30 is that in a development mode. All i seem to get is Cache missed reason: (auto cache) and i cannot work out why.

At the end there is a flash from 5d ago to 7d ago close to the article date

Hi Lee, thanks for video. Are there any demo links?

How can I update the cache for a specific tag manually? I want to update DB Data with fetch POST, and use the returned data to update the cache for the corresponding get requests, so I don't have to fetch it with revalidateTag and make a redundant request, since I already have the data.

@lee is awesome

How to properly handle cache for horizontal scale the app ?

I wish you make another film deeply explaining foundations of caching - for both static and dynamic routes. We have 4 different cache parts (1 for client and 3 for server) and I think Router Cache (client side) is the most frustrating one. It's easy to manually reload the page, everything works fine but no one uses the internet like that and for me Router Cache causing problems when navigating through different routes.

Stable app router caching, brushing over all the unstable APIs

Is there any configuration for next.config to console.log the page size that's sent to user? 6:30

If you use a router to redirect to another route from a client function, the revalidateTag and revalidatePath do not work. It is really annoying not being able to disable the cache.

If I have a website that can pull and push data from a MongoDB server and another separate website that just pulls the data from the server how do I get the second website to update during production and know that new data has been added? It works great on a development server cause there is not caching but my only option right now is to rebuild and push the production app everytime the database is modified to get the most up to date information because without it I can see it just hits nextjs-cache that never updates. It is so frustruitng cause there is not way to even add a way to refresh the cache every hour or something.

I like this framework and have been using it for almost 5 years. Caching and the way how to fetch data is probably the worst thing on the latest versions for me. The whole concept of putting duplicate API requests to several places and "fixing it" by caching feels just wrong. I have been building apps for 15 years and this was always a sign that you are doing something wrong, now you are teaching people the exact opposite. Mental battle.

great vid thanks @Vercel. Ignore these losers complaining about the cache. You guys are pushing FE to the next level, and developers unable to learn and adapt shouldn't be in this industry anyways. btw, if you all dont want to use the new cache design, just stick with the Pages router..

Really tough having dev behave different than production build. I'd hope they'd always be the same behavior as far as caching goes. Enjoyed the video though thank you for explaining