#router cache

23 messages · Page 1 of 1 (latest)

thorny osprey
#

If I have a page where I want to get the lastest data whenever I navigate to it should I make it a client component and fetch data with SWR or leave it as a server component with a force dynamic and add a client component to it that does router.refresh

rustic vesselBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

glass oxide
#

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 @thorny osprey

#

let me know if that solved your issue

thorny osprey
#

@glass oxide 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

glass oxide
thorny osprey
#

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

glass oxide
#

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

glass oxide
#

?

thorny osprey
#

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

glass oxide
#

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?

zealous trail
#

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.

zealous trail
#

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.

loud olive
zealous trail
#

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.

loud olive
zealous trail
#

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

glass oxide
thorny osprey
#

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

bronze kiln
#

At the end the best is a server action

#

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