Next.js Discord

Discord Forum

Force Refetch Route on every visit. Using App Router

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
Hello. in my app dir I have page.tsx, layout.tsx and route folder /history.

in layout.tsx on top I have component <Navbar /> --> Navbar has 2 <Links> , 1 point to "/" and 2. "/history".
I have problem that I dont know how to force refetch every time when <Link href="/history/> is clicked

In history I have only page.tsx with async function and imported data fetch
in fetchHistory.tsx I using {cache: "no-store"}.

But when I clicking History on navbar , when I am on History nothing is fetched(refetched)

Thank you

22 Replies

Spectacled bear
To get it not to fetch at build time, set revalidate=0 on the route. To get it not to cache at run time, put it into draft mode. https://nextjs.org/docs/app/building-your-application/configuring/draft-mode
IMO this should be front and center in the Next docs, because most people are not working on static sites
Brown bearOP
Thank you
Wait so after building site {cache: "no-store"} will be working and every time I visit route , data will be fetched again?
and for dev mode I need to activate Draft Mode ?
Brown bearOP
its sound so easy... Just refetch data on page visit... :this_is_fine:
European sprat
On subsequent visits to those pages, it is all client side navigated so you need a way for the client to refetch the data
Brown bearOP
yes I looking for that way 😄
Spectacled bear
Check out the videos on this page for more on this issue https://medium.com/better-programming/some-first-thoughts-on-next-13-922a6a6c5200
Note that draft mode is not mentioned--that's something I learned after writing the article
Northeast Congo Lion
I solved this problem by adding export const revalidate = 0 to page that need to be fresh on each request.
But I don't fully understand it.. So in that case if, lets say, 1000 users decide to visit that route at around the same time there will be 1000 requests to my next app and 1000 requests to my back end from which i fetch history, no caching at all right?
Spectacled bear
That's correct, Kate20.
If you want it to act differently in production, I think you can set up environment variables to swap the behavior
Or you can conditionally enable draft mode based on env variables https://github.com/AmyBlankenship/next-contacts-example/blob/main/app/api/checkDraftMode.ts
Northeast Congo Lion
but if i add { revalidate: 60 } to fetch for example, i can reduce requests to back end to one?
if all the users come during this minute?
Thank you DogLovingCoder !
Spectacled bear
The problem is that on most sites users aren't just sitting there looking at your site, they're actively changing data. And even for example the same user that changes some data and then navigates back to the main page, that user will not see his changes in many scenarios.
If your site is truly static, then great, cache away, but Next is billing itself as a full stack framework, which it isn't with default configuration
@Spectacled bear If your site is truly static, then great, cache away, but Next is billing itself as a full stack framework, which it isn't with default configuration
Northeast Congo Lion
Yes, I agree, but there can be so many different use cases, I believe they decided to make everything static by default, even though it is not what most developers do. So all the customisation is on us unfortunately 😦
Spectacled bear
I believe that as well. I just feel it was kinda unwise