Next.js App Router Caching: Explained!

[@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.

[@drewhjava]

Exactly. I don't even understand this framework is trying to accomplish. If I want static pages I would just set cache-control and stale while revalidate. Let me opt out of in-memory caching and static pages.

[@onemaninaboat]

That's what I was about to write. Instead of several different methods all over the place to opt out, the caching should be entirely opt in. What a mess, eh?

[@MrManafon]

Especially when you realise that monkeypatching fetch impacts all the third party libraries lol. Any SDK npm you use gets severe caching without you onowing or being able to prevent it. Meanwhile its still unclear how to cache non fetch-based stuff.

[@meenstreek]

@@MrManafon While I agree that monkeypatching fetch is a bad call, you are commenting on a video that tells you how to cache a non fetch-based API call. It's at 7:37.

[@RolandAyala]

+1. Nextjs caching drove me to Remix and, looking back, great decision. Nextjs caching is over-engineeried, and that this video is needed is yet another proof point.

[@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.

[@leerob]

Sounds dope, I love jQuery

[@activenode]

Jared the man to provide criticism without saying it

[@whramijg]

He said it alright.

[@minhazrabbi531]

🤣🤣🤣

[@mattmendez8860]

Hahahahahahaha

[@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 👍

[@AmirLatypov]

Completely agree. Optimization should be one of the last steps to do, not the first one. Many pages will not need cache at all (or very limited by time), unless we are doing a Wordpress blog 😀

[@jfedererj]

I think for v15, with the stable release of partial pre-rendering, fetch is gonna switch to being uncached by default.

[@tom.watkins]

@@jfedererj yeah I believe most of the defaults will now be uncached by default

[@sean_reyes]

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

[@AmirLatypov]

With app router? You can create a root layout with cookies() or headers(), and render children as usual. I think it will prevent creating static pages.

[@FeFeronkaMetallica]

You cant

[@chickenchaser176]

use pages router

[@caiomiglioli]

@@AmirLatypov you can pass server components as children/props of client components (thats the basis of context/providers in next app router). So turning the layout to client component should not make its children into client components

[@manojsoni232]

export const fetchCache ='force-no-store'

[@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.

[@sagesofsound298]

Right, just overall we need to have more ways to see things versus just assuming things.

[@jacobsloots6481]

Yeah if they could extend the logging to cover all cache use cases and provide an option to run it during full builds (or even better make the cache behavior in dev mirror build) it would go a long way in clarifying what exactly is going on.

[@51Grimz]

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

[@sulavbaral9972]

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

[@Flash136]

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.

[@AmirLatypov]

Ha, the interesting thing that it doesn’t work, because it’s still unstable 😀. Without unstable functions, it’s easier to say - just use headers() or cookies() inside your code, or it will be cached as a static page. Done.

[@AmirLatypov]

I suppose that no one wants to use unstable functions on their prods.

[@aberba]

​@@AmirLatypovworks for me though. I took a while to get used to...just like useEffect() but I like the simplicity now. It's more complicated but simple.

[@leerob]

@@AmirLatypov As I mentioned in the video, the functionality is stable, it's just acknowledging that the API will likely change to become simplier. But yeah can use cookies instead!

[@AmirLatypov]

​@leerob Thanks for the reply! A couple of issues, though: 1) The function name doesn't make it clear if it's stable. 😅 2) You said it'll change over time, which sounds like extra work for us. So, my team's going with a third-party cache package that's already stable

[@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.

[@_evillevi]

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

[@BBxx19]

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.

[@shao7620]

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.

[@jikd0]

Get ready for hell then

[@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.

[@Fralleee]

The video we all wanted, thanks and great job!

[@zaynelovecraft]

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

[@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!

[@ahmed-ll3kk]

wow you are here !

[@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.

[@inexistente]

i'd rather choose to opt-in instead of opt-out too

[@yudistiraashadi6643]

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!

[@luisandrade1291]

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

[@DennisPeters39]

it´s so confusing

[@brennang02]

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.

[@leerob]

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

[@debugloop]

this much changes this often is mind fuck to be honest.

[@kasper369]

Amazing stuff! Love this kind of content. 💖

[@kasper369]

Maybe video on llms and next.js ?

[@vommir.]

Hi Lee, thanks for this video. I was stuck on App Router yesterday. Will try revalidateTag. Can you specify revalidate along with it?

[@leerob]

Good idea @@kasper369 !

[@ahmednasar-e7x]

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

[@codinginflow]

(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.

[@Mirislomovmirjalol]

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?

[@BBxx19]

You wouldn’t cache everywhere. For dashboards, caching makes little sense unless you want to cache some common data that you fetch from your database for all users which is expensive to do. Keep in mind if you are self hosting with multiple instances, the entire caching and revalidating becomes a joke and you need to implement the cache handler/storage urself, see docs. With partial prerendering (beta) you could render a shell of the page and everything else that is static and keep the rest dynamic.

[@ashdaily7640]

@@BBxx19 what do you mean by self hosting with multiple instances? Why would it affect caching?

[@BBxx19]

@@ashdaily7640 Assuming you want to use some of the caching features: if you have multiple instances running which is usual, e.g. multiple pods in a k8s cluster, then you will have multiple applications running that will have different caching states since they can’t share the cache when you revalidate something, without a custom cache config. Thus you can have stale data when reloading the page depending on which instance is serving you.

[@ashdaily7640]

@@BBxx19 that makes a lot of sense. Thank you. In such cases, we would have to use a shared place for caching like Redis, right?

[@AmirLatypov]

Yes, Redis would be a good choice

[@wintercounter2]

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.

[@leerob]

Hey there, do you have a GitHub issue for the bug you're seeing? We can take a look. If you want to opt-out of caching for fetch, I talk about this @7:03 in the video.

[@wintercounter2]

@@leerob Tried to post a Github link but TY doesn't let me in any form...

[@RevoSW]

@@wintercounter2 You could write it like "user/repo". Then people may substitute the user and repo in the actual github link

[@incseeuu]

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

[@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

[@oscarljimenez5717]

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.

[@rijkvanwel]

Good idea on the config object. Those magic variables are indeed always hard to remember

[@zaynelovecraft]

13:20 this is great but you had to Hard Reload to get the browser cache to break the cache on the browser side... This is still difficult to me when I revalidatePath its great because if I hard reload the static page is rebuilt but how can I stop the browser from showing its cached version of the page without hard reloading. I am also using the Link component and this component skips hard reloads when navigating between pages.

[@lucasprins8895]

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

[@JShunk]

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.

[@JShunk]

Here is what the API looks like atm: export const GET = async (req: Request, res: NextResponse) => { try { await connectDB(); const post = await prisma.post.findMany(); return NextResponse.json({message: "Data fetched successfully", post}, {status: 200}) } catch (err) { return NextResponse.json({message: "Error fetching data", err}, {status: 500}) } finally{ await disconnectDB(); } };

[@geetube79]

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.

[@muhammadhossam8557]

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 ?

[@DVSK1]

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

[@leerob]

You add tags onto your fetches, so the tag is part of the cache key to invalidate.

[@DVSK1]

In the case of fetches directly with server actions, how do I define a tag to revalidate later?

[@Lucas-gt8en]

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!

[@JEM_GG]

Thank you Lee, these are so helpful

[@EmoPorEmilio]

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

[@leerob]

Have you tried it out yet?

[@EmoPorEmilio]

@@leerob yeah! I'm trying to really learn it because I like react, next and your videos. Thank you for them. Those two imports seemed crazy to me while watching and learning.

[@techshare5778]

Amazing video. All my confusion is gone now

[@relaxwithai]

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.

[@proudkinglion2215]

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.

[@MrSandeeparneja]

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

[@nicc1262]

Yes - having same issue

[@nicolasguillenc]

At 12:32 isn't it a problem that we would need to keep track of every tag that needs to be revalidated when data changes? I have not finished the video so maybe you will address this but it doesn't seem intuitive.

[@vash6249]

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?

[@IAMTHEMUSK]

I have made a nextjs fulstack app that runs all its pages as "use client", those client pages call the nextjs api that calls directly an external api. But the external api responses seem to be cashed in next js app because they are always the same. For example I upcate an object in a list, the list returned is the last state of the list after last app deployment. If I call the external api, the real response is the updated state, but nextjs ignores it and prioritize its cached value. This happens only on deployed apps, I don't have this behaviour in local, I don't understand why I never had that issue before

[@logemann74]

love those little demos .... really valuable

[@api-first]

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 ...

[@heeeyyooou8714]

Wow amazing please continue!

[@leerob]

Thanks!

[@screemoh]

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.

[@leerob]

Did you see the logging config in the video?

[@paulpietzko]

I created GET and PATCH API endpoints. They work perfectly fine on my localhost, but when I deploy the app, the response is always cached. Is there a way to disable caching on Vercel for specific routes?

[@drewhjava]

"What if you have a fetch, but you don't want it cached?" Do you mean like 98% of all use cases people would use Next for?

[@IvanKleshnin]

Nice one :)

[@ИмяФамилия-х4в1е]

You can pass cache: 'no-store' to fetch, to opt out the default behavior

[@mariossimou2635]

Or set revalidate to 0, which also disables caching

[@BBxx19]

@@ИмяФамилия-х4в1еyes but it shouldn’t be the default behavior. Caching is a very specific and intentional action and not a general thing. The comparison with the pages directory is also not ideal since you explicitly had to tell what is static and what is dynamic data before at one specific place. The same concept can’t just be transferred to the App directory. It just doesn’t work out if too much 🪄 magic is involved and you first need to explain your users why things behave the way they do. It should be self explanatory.

[@zombiefacesupreme]

Do you guys really think that they don't know how to opt out? The point is that caching is never expected to be opt-out. For the last 30 years of the web, it's always been opt-in. It's not surprising that this has been a huge point of contention.

[@AsjadAnis]

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.

[@rdmPerson]

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

[@rdmPerson]

I know I can get it from Inspect but I am lazy

[@edhahaz]

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

[@App1eLetsPLays]

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.

[@sympijs]

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

[@leerob]

You should basically never need the route segment options, those are the eject button - I'll try to make this more clear in the docs!

[@samithafernando6432]

@@leerob we had to use it because of CSP headers :(. Is there a better way to support CSP without using "eject" button?

[@leerob]

@@samithafernando6432 noStore should achieve the same thing. Does it not for you?

[@nilskaspersson]

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?

[@tushars4038]

We are using Nextjs 14 App router and when we are trying to enable caching in Cloudfront, all assets are getting duplicated. All images on page is replaced by one image. Is this a nextjs issue or Cloudfront ? Appreciate any help.

[@loveboat]

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..?

[@christophercaldwell6641]

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?

[@derekgygax9928]

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?

[@AdebiyiDaniel]

Hello, how does revalidate tag/path affect pagination

[@Vedica-kr6hd]

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?

[@itsmannyb]

Insightful and helpful explanation, Lee!

[@carlosagsmendes]

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

[@AmirLatypov]

#2 Yep, just use cookies(). Or use a middleware. Btw I wonder, if I use cookies() only in a middleware, will it prevent page to be static cached?

[@carlosagsmendes]

Thank you. Does it have middleware per route? Can we make rest requests from the API?

[@AmirLatypov]

@@carlosagsmendes middleware applies for all routes, but you can filter it depends on url: request.nextUrl.pathname Don't know how the cache will work with middlewares though

[@PaweZakrzewskiDex]

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?

[@myview7029]

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

[@oscaryiudev]

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

[@paolobooker4163]

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.

[@mukleshossen751]

I am using unstable_cache method in my for query data and I am facing a problem here if i change something in database it's doesn't refeclt in my app although I hard refresh with empty cache it's doesn't reflect into the app. but it's working in development environment. anyone facing this problem?? can you please tell me how resolve the problem??

[@ariell121]

How can I opt-out of client side caching?

[@ariell121]

Looking though the docs and I just found you can't opt-out of client side cache... wtf bro

[@david.thomas.108]

Great video and well explained thanks.

[@enstromper]

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

[@lucass.p9579]

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

[@nicc1262]

I see the (cache: HIT) when I refrech the page, after adding the config he showed, but when I do a hard refresh (Ctrl + shift + R) I don't see the (cache: SKIP), I just see no URL logging at all... anyone else get this and know how to fix it?

[@insertvalues]

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?

[@27sosite73]

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

[@mattd5419]

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

[@CadisDiEtrama000]

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

[@llanesluis19]

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

[@CodingBill]

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

[@baslecout4734]

Hello, unstable_cache and revalidateTag works really well with locally built and start project put on prod on vercel I can;t figure out how to revalidate the cache other than by pressing "cache purge" in vercel settings, did anyone experienced the same?

[@rudolfkovalyov184]

How to properly handle cache for horizontal scale the app ?

[@hogehoge-q1v]

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?

[@shivashukla7894]

why I am unable to see chache HIT or skip. I have added this in next config logging: { fetches: { fullUrl: true, } }

[@nicc1262]

Same

[@abbastaeb505]

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??

[@ilhamsaputrajati9767]

how to show console log cache hit or not ?

[@discoverlance]

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?

[@wfl-junior]

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

[@aberba]

How do even test the application with all the magic variables now? I don't like the idea of eliminating REST APIs. The PHP code I wrote like this yrs ago is now maintenance nightmare. I'll avoid server actions for now and still write my code like pages router SSR. There's too much magic now and things seem to be getting more complicated.

[@ableandrew]

lots of fun ideas, thanks!

[@Svish_]

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? 🤔

[@BBxx19]

React cache is somewhat comparable to useMemo but is obviously used differently in the context of server components. You can perform an expensive operation (get some data from the db, do some calculations, check the authentication of the user etc.) and only perform it once for the full rendering/request even if you call it from 5 different components. E.g.: You get user details from the DB in the layout to check if they are authenticated, additionally you get the user on a specific page to check for authorization. If you warp the function to get the data from DB with cache, you will only perform one DB call instead of two. At the end of the render, this cache is emptied. The nextjs cache can be used if you want to cache some general data that will persist over different requests, users etc.

[@ashdaily7640]

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?

[@leerob]

Yeah, the Next.js cache is also reusing that for future requests :)

[@ashdaily7640]

@@leerob does NextJS make use of redis to do this?

[@aflg75]

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?

[@sayazdir]

how much should I really care about how my web app will function when javascript is disabled in the clients browser?

[@codefinity]

Not much. It’s an ancillary benefit. But the part about shitty connections might be 👍.

[@gabrielmedina488]

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

[@luisandrade1291]

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

[@juanferrer5885]

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

[@marvy-ye5hu]

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

[@swtmply]

Hello Lee, why I can't revalidate auth() from next-auth normally with revalidatePath

[@leerob]

What is auth() here? NextAuth?

[@swtmply]

​@@leerob ah yes with next-auth

[@leerob]

@@swtmply auth won't be cached since it's reading cookies!

[@williamschaefermeyer7007]

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

[@ooogabooga5111]

This is the REALL problem, I wish more people talked this.