I'm using a combination of dynamic routes with getStaticProps and getStaticPaths, and getStaticProps on some non-dynamic pages.

When deployed, after a few days pages begin to 404 randomly.

When I inspect the network panel in Chrome devtools I see the json data files that get prefetched for each page are 404ing.

This seems to happen with any page that uses getStaticProps.

I've attached a video demonstrating what happens in the network tab when I repeatedly reload a simple index page (not dynamic).

Code for simple index page:

import { GetStaticProps, NextPage } from "next";
import { PageProps } from "@/model/pageProps";
import PageTemplate from "@/templates/PageTemplate";
import { fetchPageData } from "@/strapiLib/fetchStrapi";

const Home: NextPage<PageProps> = (props) => {
  return <PageTemplate {...props} />;
};

export const getStaticProps: GetStaticProps = async () => {
  const data = await fetchPageData("home");

  if (!data) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      components: data.attributes?.Components ?? null,
      pageMeta: data.attributes?.PageMeta ?? null,
      publishedAt: data.attributes?.publishedAt ?? null,
    },
  };
};

export default Home;

The code is deployed to Azure App Service.
Cloudflare is used for reverse proxy.

Any ideas as to why this is happening and how to stop it?