I am using Next.js 14 App router to build a static page that updates its data after 4s. This works on local environtment when i run build and start the app. However, when i deploy it to aws-amplify. when the data changes and i update it, it fetches the updated data, but when i refresh it again, it fetches the previous data. please, what am i doing wrongly here as i have gone through the docs to see how caching and revalidation works in nextjs.

export const revalidate = 4;

export async function generateStaticParams() {
  return [
    { lang: "en" },
    { lang: "fr" },
    { lang: "de" },
    { lang: "it" },
    { lang: "fr-ch" },
    { lang: "de-ch" },
  ];
}

async function fetchEndpoint(query = "", { variables } = {}) {
  const res = await fetch("https://apibkofc.globalvoices.com/graphql", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  if (!res.ok) {
    console.error(res);
    return {};
  }

  const { data } = await res.json();

  return data;
}


 async function Home({ params: { lang } }) {
  let receivedData = await getHome(lang);
  let data = await receivedData?.pages?.nodes[0];
  
  return <div style={{ marginBottom: "5rem" }}>{data.title}</div>;
}