Mastering Fetch API and Caching in NextJS

In this video, I guide you through a useful approach to managing the Fetch API and caching in NextJS. I demonstrate how the Fetch API by default caches data, which can be beneficial for reducing server resource load, but may also present obstacles when trying to display real-time data updates. I reveal a workaround that involves setting the cache on a global level, which allows for setting caching configurations on a per-request basis and ensures subsequent requests fetch the same data.

This method is demonstrated on a basic NextJS project that mimics an API endpoint to pull product data. Furthermore, we explore functionalities like 'revalidate', which clears the cache after a specific interval. This tutorial is suitable for those working on new and existing projects, providing a neat way to default to not caching everything and allowing caching on a request basis.

📖 Chapters:
00:21 Understanding the Default Caching in Fetch API
01:48 Demonstration: Fetch API Caching in Action
06:12 Setting Global No-Cache in Fetch API
07:24 Testing the Global No-Cache Setting
07:43 Exploring Revalidation in Fetch API
08:53 Conclusion: The Benefits of Customising Fetch API Caching

🔑 Key Takeaways
- fetchCache option globally disables caching and allows per-request control
- Fetch API caches data by default but can be customised

🔗 Resources

[KadirKATIRCI]

Thank you! Good explanation as i need...

[Wizard_hub]

Thank You.Can I ask about how it would function for different users accessing server at different time.Does it revalidate at a set interval of say 60 secs or 60 secs elapsed after the user accessed the server

Thank you for your explanation💥

[helciofranco]

Is this cache for a specific user-session or shared between every user?
I'd like to understand if another user have accessed your site if he would trigger a new request or not