Next.js Discord

Discord Forum

Cache issue : Documenting no-store and no-cache behaviors

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hello there ! I'm currently unable to reproduce the behavior of "getStaticProps" into the app router. Like so :
export const getStaticProps = async () => {
  return {
    props: { test: new Date().getTime() },
    revalidate: 5,
  };
};

This snippet is actually working like a charm in page router : revalidating the data to ALL clients even if they are client side navigating after a 5 second cooldown.

Well it's not the same within the app router with this snippet :

export default async function Home() {
  const data = await fetch("https://worldtimeapi.org/api/timezone/Europe/London", {
    next: {
      revalidate: 5,
    },
    cache: "no-cache",
  });
  const json = await data.json();

  return <main>{json.unixtime}</main>;
}
export const dynamic = "force-dynamic";
export const revalidate = 5;

// and other segment config blablabla


I cannot handle to reproduce this behavior and this is blocking me from porting my app to app dir....

11 Replies

Rafael Almeida
the settings in the app router version are contradictory. just next: { revalidate: 5 } } would have been enough. if you add cache: "no-cache" you are basically requesting the same behavior of getServerSideProps and negating the time-based revalidation
Netherland DwarfOP
You made me doubt so i retried with those snippets :
export default async function Home() {
  const data = await fetch("https://worldtimeapi.org/api/timezone/Europe/London", {
    next: {
      revalidate: 5,
    },
  });
  const json = await data.json();

  return <main>Home - {json.unixtime}</main>;
}

export default async function Home() {
  const data = await fetch("https://worldtimeapi.org/api/timezone/Europe/London", {
    cache: "no-cache",
  });
  const json = await data.json();

  return <main>Home - {json.unixtime}</main>;
}


And data never refresh...
Am i doing something wrong ? According to what you said it seems to be correct to me...
Netherland DwarfOP
here's the all code : https://github.com/Bilboramix/next_cache_reproduction

And the working one : https://github.com/Bilboramix/next_cache_reproduction_working
Netherland DwarfOP
🆙
actually i think 13.4.19 also works, try that version first
Netherland DwarfOP
Well i found why :

Version change did not modified the behavior @joulev (thanks anyway ❤️ )

So my behavior firstly did not worked at all because i was coding it in layout.tsx file and this part of the page is generated at compile time so any dynamic data is screwed here.

So i moved the behavior to the home page, then I added a console log on it to have a trace in the console of when the fetch is called.

And no more problem with the call with { next : { revalidate : XXX }}
So i verified what you said @Rafael Almeida and that's okay ! ( thanks ❤️ )

But with { cache: "no-cache" } (only this option this time 🤪) i still got a strange behavior :

When I click for the first time (or after start/hard refresh, whatever), the page is cached (Router cache).
Then I wait for 30 seconds for the router cache to expire.
I can navigate wherever I want during this time, the fetch is not called wherever i go (even on home)

Then after the timer I navigate back to the home page and there my fetch is executed.
And now there is no more router cache: When I navigate to the home page, I can refresh as much as I want (is this an intended behavior ?)

I then wait for 5 minutes and I come back to the first behavior: If I click on home, the value remains cached for 30 seconds and then I can refresh continuously until 5 min and again and again.
Netherland DwarfOP
Hello there, i made some changes on my repo so we can see the strange behavior with "no-cache" and "no-store".

https://github.com/Bilboramix/next_cache_reproduction

If someone can tell me if this is intended or not ?