you should make the page rendered on request time and maybe also force dynamic. Then it will be rendered on every request. You can also set the revalidation to 0, to make it refresh everytime when you navigate @Vesper Sparrow

let me know if that solved your issue

@B33fb0n3 I tried all of this and it still shows the stale data until I refresh the page this a thing with the router cache or the client cache it chaches data for 30 seconds before revalidating it

you don't do anything from that?

I use don't use server actions

And my question is to make it a client component or leave it as a server component and add a client component to the page that only do a router.refesh when I navigate to the page

just to get this right: one client should get a data refresh in less than 30 seconds, whenever this one client navigates, right?

?

Sorry discord notifications was turned off, the thing is that I'm building an ERP system with next I have a page where I add a new invoice to the db then when I navigate to the invoices page I don't see the new newly added invoice untill I refresh the page which is a server component where I fetch invoices with Prisma I tried to add force dynamic and revalidate 0 and it doesn't work

If I don't refresh the invoices page I must wait 30 seconds to see the newly added invoice when I navigate to the invoices page, this due to the router cache

So like you are on the page „/invoices/“ and there you creating a new invoice in the db. Then you want to redirect the client to for example: „invoices/yournewinvoiceid/“ and the created invoice should be shown. Am I understood you right?

From my understanding, OP creates a new invoice record in a page like "/invoices/new", and then use "router.push('/invoices')" to navigate back to the invoice list page. The problem is that since there is a 30 seconds client side cache (also called "router cache"), the page would only show stale data without the newly created record.

Since Next.js provide no way to bust client side cache, the only way to ensure seeing a new invoice record in previously mentioned situation would be either:

1. Calling "router.refresh" in the "/invoices" page on mount.
2. Fetch the invoices data in "/invoices" page from a client component instead of from server component.

OP is asking which way is the preferred way to do it.

This forced client side cache is the most annoying issue I have encountered while trying Next.js 13+.
I am also keen on knowing the answer, perhaps someone has a better solution than the two mentioned above.

https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
I think either revalidatePath/revalidateTag or router.refresh will invalidate the router cache?

revalidatePath/revalidateTag would require server action. OP is not using server action. OP does try calling "router.refresh" in a client component but wants to know whether he should do that or just fetch the data directly from a client component.

but you just said there is no way to bust the client side cache

Sorry, my bad. I was trying to say "opt-out".

yea, as Ray, Yinnv and I said you should do one of (these ones)[https://media.discordapp.net/attachments/1185225771984371742/1185267460824367114/image.png?ex=658efd57&is=657c8857&hm=8e9482295d426921b4b4a419f61c64011f9b7c8424171e1e7df3165a033574d2&=&format=webp&quality=lossless]

if your issue is solved, please mark this message as solution

So at the end what is better router.refresh or a client component fetching ?

Neither router.refresh nor client side fetching are the best options there is