I don't understand the caching with next.js's app router #shorts

[kincunico]

SO I AM NOT STUPID? This is intended? GOD, I was so frustrated with myself.

[christophersanchez]

Tried adding a key to my component and it worked.

[owenwexler]

The two biggest problems in computer programming, so they say, are cache invalidation, naming variables, and off-by-one errors.

[jakep]

I faced the same issue at work today. Export const fetchCache=“force-no-store” worked but I am not a fan of this new change

[brangja]

It's because, it's a server component. Server component only send returned HTML to client. There will be no functions shipped to client. It's just dry html.
In this particular case you should use client component.

[Solution]: Make the entire component "use client" or make separate "use client" component for particular html part along with the functions you wanna execute on client side. In your particular case the <div>{post.name}</div> should be a separate "use client" component along with the random number function.

Put it in this way. Everything is situational. Just for random number like this, use client component. But for data fetching, use server component along with Next's fetch API, which will revalidate your data on every visit of the page through Link.

[MikeNugget]

And now imagine when you're trying to make hotfix for production and fall into debug hell with this ✌️ROBUST✌️ feature together with such nice, comprehensive and self explanatory documentation.

[jonny]

There is currently not a fix for this. It's a common complaint in their discord. Dynamic data fetching only occurs when page is being fetched from the server. If the page was previously fetched and stored on the browser, no call is made to the server so the updated "data" is not shown. For it revalidate every time the page is visited, it would have to make a request to the server every time the page is navigated to since RSC code can only be run on the server. The only solution is to have whatever you need to be revalidated everytime the page is navigated in a client component. I think this functionality is intended but confusing.

The only options they provide for data revalidation within a RSC are the following:

- You could use hard navigation instead of soft navigation to trigger a request to server everytime the page is visited.

- revalidatePath either through a server action or a call to an API route/route handler
- revalidateTag with those same methods as above.

The last 2 would have to be done on-demand so something like a revalidate button. This revalidates the data on the server and then triggers a reload of the components that rely on that data.

[Nofy]

Try fetching data from the server instead of trying to test this with a JS function. There is useCallback for that matter. Revalidate 60 for example means that your fetch request will grab the stored data in your DB after 60 seconds and use the stored cache until then. Source: the supabase team intro videos.

[gigivadachkoria]

one solution is, in dashboard use progamatic navigation instead of Link and call router.refresh() when navigating

[engine_man]

This is a case where you do client side rendering, important data that you need for your markup can be done through server side fetching or static generation. Just saying you don’t need to use RSC if it doesn’t fit your use case

[mehmeterencelik]

My solution for this is calling router.refresh() after every server action. But if app is dynamic for example has user to user interaction this will not work.

[aacituur]

This behaviour is due to routing not caching that's why revalidate and things like that are useless here. Next uses both client side and server side routing so the first load is server sided and the second one acts like an SPA, returning the same page as before.

The fix will heavely depend on the use case but I think this is a thing in every framework that provides routing.

[feyzullahyldz]

It is because of client side navigation. Default client side cache value was 30 seconds I guess.

[szymon]

Currently with this weird af caching:
App router — for pages
Pages router — for apps

[DS-owge]

Ohh my login page after redirecting still shows “Login” in the metadata from the login RSC. This has got to be why. Heck.

[shingotennichishingotennic]

POST method perfectly works so I replaced all GET method with POST method lol

[putsuthisrisinlpa]

You could probably wrap that in a client component and fetch the data that needs to be updated frequently on the client side

[ziacodes]

I'm having similar issue. Exactly the same issue. but one hack is to use revalidate = 0 and if you go to another route and come back again, it shows updated data.

[peculiarnewbie]

putting the getPost function inside an internal api route and calling it using fetch inside PostPage works

[zakarialabiad]

try throwing "use server"; somewhere to make it server side