Netlify and Next.js Caching

Support
1

I have a Next 12.0.7 site deployed on Netlify and I fetch data from a headless CMS. When I change the request and add an order parameter, the page does update locally, but not on Netlify. This seems to be a caching issue on Netlify’s side. I deleted the build cache and deployed again twice, but it did not fix anything. Again: Locally and in dev

This is how I fetch the data:

// utils.js

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
const baseUrl = publicRuntimeConfig.BASE_URL;

async function fetchQuery(path, params = null) {
  let url;
  if (params !== null) {
    url = `${baseUrl}/${path}?${params}`;
  } else {
    url = `${baseUrl}/${path}`;
  }
  const response = await fetch(`${url}`, { next: { revalidate: 3600 } });
  const data = await response.json();
  return data;
}

export default function Home({
  pressReports,
}) {
  return (
    <div>
      <Header />
      <ClippingsSection
        pressReports={pressReports}
      />
    </div>
  );
}
export async function getServerSideProps() {
  const pressClipplingEntries = 6;
  const pressReports = await fetchQuery(
    "press-reports",
    `_start=0&_limit=${pressClipplingEntries}&_sort=date:DESC`
  );
  return {
    props: {
      pressReports,
    },
  };
}

This issue makes Netlify unsuable for our client and I don’t know what to do here. Support is greatly appreciated.

Thanks

2

Next.js 12 support is in maintenance mode and we currently don’t troubleshoot it. Upgrade to Next.js 13.5+ and Next.js Runtime v5.