API data does not update in production, but works locally

Question

I have a problem and I can't see the error.

My app made with Next.js, uses an API to fetch values of a currency.

Locally, the date and prices are updated when they are modified. But in production it is not working, it only shows the last data that was loaded when the deployment was done.

I use getStaticProps in the index to fetch the data for each currency category.

export default function Home({ oficial, blue, bolsa, turista, contadoliqui }) {
  return (
    <Layout>
      <Box p={10}>
        <Stack
          display={{ md: "flex" }}
          spacing={8}
          direction={["column", "column", "row"]}
        >
          <DolarOficialCard oficial={oficial} />
          <DolarBlueCard blue={blue} />
        </Stack>
        <Stack
          display={{ md: "flex" }}
          spacing={8}
          mt={8}
          direction={["column", "column", "row"]}
        >
          <DolarBolsaCard bolsa={bolsa} />
          <DolarContado contadoliqui={contadoliqui} />
        </Stack>
        <Box direction={["column", "column", "row"]} spacing={8} mt={8}>
          <DolarTuristaCard turista={turista} />
        </Box>
        <Box align="center" mt={50}>
          <Alert status="info" justifyContent="center">
            <AlertIcon />
            Última Actualización: {oficial.fecha}
          </Alert>
        </Box>
      </Box>
    </Layout>
  );
}

export const getStaticProps = async () => {
  const oficial = await getDolarOficial();
  const blue = await getDolarBlue();
  const bolsa = await getDolarBolsa();
  const turista = await getDolarTurista();
  const contadoliqui = await getDolarLiqui();

  return {
    props: {
      oficial,
      blue,
      bolsa,
      turista,
      contadoliqui,
    },
  };
};

Answer 1

getStaticProps means your page is a static page, only generated once. If you want to always fetch the latest data, you need to use getServerSideProps

Otherwise you can use incremental static regeneration. You need your getStaticProps to revalidate in a predefined "seconds".

export const getStaticProps = async () => {
  const oficial = await getDolarOficial();
  const blue = await getDolarBlue();
  const bolsa = await getDolarBolsa();
  const turista = await getDolarTurista();
  const contadoliqui = await getDolarLiqui();

  return {
    props: {
      oficial,
      blue,
      bolsa,
      turista,
      contadoliqui,
    },
      revalidate: 10, // Revalidate every 10 seconds with new data.
  };
};

In development (next dev), getStaticProps will be called on every request.

This is the reason why it works locally but not in production.