Nextjs 14 fetch GET request response get cached until the next build

I have this ProductsList component in my next.js project

const loadProducts = ()=>{
const response = await fetch("my-api-end-point", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-store", // Prevent caching
        },
      });
}

 useEffect(() => {
    loadProducts();
  }, []);

This is very simple code where I call a function to load products when component mounted. I have an admin panel where I enter all of these products. In my local development environment when I do a page refresh newly added products successfully load to the component via the API call.

But in production environmnet these products not loading until I release a new production build. But in production env, when I inspect the network call, I see it calling the correct endpoint but response seems cached. I don't see latest products in that response.

It seems like somehow the endpoint response got cached during the build process. I've added cache-control:no store header but the results is the same.

How can I fix this with next.js 14?

Got the same error and the problem like you said is due to caching.

This solution worked for me.

Solution :

import this line in your loadProducts component and in your api route file

export const dynamic = 'force-dynamic' 

Suggestion :

• You can upgrade to Nextjs 15 as the caching is turned off by default which makes a lot more sense and will save you a lot of headaches because in Nextjs you will frequently encounter caching errors.

Nextjs caching documentation: https://nextjs.org/docs/app/building-your-application/caching