Next.js Discord

Discord Forum

Fetch called twice when using revalidate.

Unanswered
Emperor Goose posted this in #help-forum
Open in Discord
Emperor GooseOP
Code snippet:
// app/page.tsx

const fetchCMS = async () => {
  const res = await fetch("http://localhost:1499/api/1/nomenclature", {
    method: "post",
    next: { revalidate: 5 },
  });
  const data = await res.json();
  console.log(`fetchCMS has been called, [timestamp: ${Date.now()}]`);
  console.log("fetched data timestamp:", Date.now());
  return data;
};

export default async function Home() {
  const data = await fetchCMS();

  return <div>{data.timestamp}</div>;
}

I'm facing an issue with the revalidate fetch option in my Next.js app.
During the build process, the fetch function is called only once. However, when I run the app - each new page refresh (after the revalidation time has passed) triggers TWO fetch calls with a short break of 2-3ms between them instead of expected one. I have confirmed that these fetches are real by running a mock server.
Additionally, I discovered that this issue is not specific to the fetch function alone. If I console.log something inside the Home function, it is also logged twice. And again, it happens only when I use the revalidate option.

Here are some additional details about my setup:
Next app router (pure create-next-app app)
React v18
Next v14.0.3

I would greatly appreciate any insights or suggestions on how to resolve this issue. Thank you in advance for your help!

1 Reply