DEV Community

Rahul Kumar
Rahul Kumar

Posted on

2

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()
}
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay