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:00 Introduction to Fetch API with Next.js
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
- Next.js "revalidate" property balances caching and real-time updates
- Fetch API caches data by default but can be customised
🔗 Resources
NextJS Data Fetching, Caching, and Revalidating: nextjs.org/docs/app/building-...
NextJS Fetch Function: nextjs.org/docs/app/api-refer...
Fetch API: developer.mozilla.org/en-US/d...