I’m fetching a router handler in Next.js server component using the next.revalidate property, and it doesn’t revalidate in production even after I refresh the page several seconds later. However, it works in the local environment.

You might be wondering why I’m fetching the router handler in server component. The reason is that I want to implement ISG.

My actual logic involves fetching data from DynamoDB using the aws-sdk. My DB is updated once an hour by a cron job. Since the data is partially dynamic, that’s why I want to use ISG.

So I implemented the logic in the route handler and tried to fetch it in server component with the next.revalidate property.

I’ve created a simple reproduction:

export default async function Home() {
  const res1 = await fetch(process.env.API_BASE_URL + "/todo", {
    next: {
      revalidate: 2,
    },
  });
  const { id: id1 } = await res1.json();

  const res2 = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${getRandomInt(1, 200)}`,
    {
      next: {
        revalidate: 2,
      },
    }
  );
  const { id: id2 } = await res2.json();

  return (
    <main>
      <h1>Fetch Route Handler</h1>
      <span>{id1}</span>

      <h1>Fetch External URL</h1>
      <span>{id2}</span>
    </main>
  );
}

The /todo API works the same as the second logic in the code above.
id1 is not revalidated, but id2 is revalidated when I refresh the page.

process.env.API_BASE_URL is the URL of the deployed site + "/api", FYI.

Does anyone know why?
My Next.js is latest version and I deployed on Vercel.

• You can check it on the deployed site: https://isr-reproduction.vercel.app/
• Reproduction repo: https://github.com/unhyif/ISR-reproduction

Thank you.