Next.js Caching Issues With Fetching Data

Introduction

Common caching issue in Next.js while building a application is default caching behaviour of Next.js that leads to frustration for so many developer. In so many case the caching helping to speed up page loads and reduce server load by storing copies of resources.
However, it can sometimes lead to outdated content displayed, which can be problematic for dynamic application like blog feed where new blog displayed when added.

Opting out of Data Caching

Next.js extends the native Web fetch() API to allow each request on the server to set its own persistent caching semantics.

To opt out of caching for individual fetch requests, you can set the cache option in fetch to 'no-store'. This will fetch data dynamically, on every request.

export default async function Page() {

  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
  const data = await dynamicData.json()
}

This will help override the default caching behaviour of Next.js