Hello guys! In this video, we will look at the "use cache" directive in Next.js. Next.js 15 introduced a new experimental feature named dynamicIO where you can turn your Next.js app from cache opt-out (default) to cache opt-in, which means that you need to manually mention which parts of the app are cached. Next.js will no longer cache anything by default, which was a community demand.
In this video, we will look at Next.js documentation of the "use cache" directives, try it in our Next.js canary app, and look at other things with it such as cacheLife and cacheTag for revalidation.
NOTE: dynamicIO is EXPERIMENTAL, please use it with caution in production environments or avoid doing that at all. There might be weird bugs that are undocumented. Also note that enabling this flag will instantly make your app cache opt-in, meaning every request which was previously cached, will no longer be cached, so make sure you know which requests you need to manually cache before pushing to production.
If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝
Links
Documentation for "use cache" (Next.js Canary) - https://nextjs.org/docs/canary/app/api-reference/directives/use-cache
cacheLife - https://nextjs.org/docs/canary/app/api-reference/functions/cacheLife
cacheTag - https://nextjs.org/docs/canary/app/api-reference/functions/cacheTag
My video on Partial Pre-Rendering in Next.js - https://youtu.be/-nicLIXkyoY
Any suggestions? Leave in the comments below!
TIMESTAMPS
0:00 - Introduction
0:58 - Documentation for the "use cache" directive
3:03 - Demonstrating "use cache" in code and comparing different version behaviours
12:42 - cacheLife and cacheTag
16:59 - Conclusion
My links
E-mail - [email protected]
Blog - https://blog.atharva.codes
Latest Links - https://links.atharva.codes
Twitter - https://twitter.com/athudeosthale
LinkedIn - https://linkedin.com/in/atharvadeosthale
#programming #programmer #javascript #nodejs #npm #reactjs #react #typescript #nextjs #next #cache