Refresh RSC page data
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Hi all, I have an RSC page with some data pulled from an API. Is there a way to trigger a refresh in that every few minutes to pull the latest data from an API/database without user interaction? Traditionally on a client component I would just have a useeffect with an interval to re-fetch.
Answered by European sprat
10 Replies
Answer
Asiatic LionOP
Is there a trick to make the ui reactive to that revalidation? That’s what I was going off and I have my fetch set to revalidate every 5 seconds but the ui never updates
European sprat
that's the router cache
you can use router.refresh() in a client component to refresh everything
router cache is 30 seconds for dynamic pages and 5 minutes for static
Asiatic LionOP
Ah ok so it does have to be a client component then?
European sprat
this is a big post to read but it goes over everything related to caching and revalidating:
https://github.com/vercel/next.js/discussions/54075
there's a proposed answer they are looking to implement
https://github.com/vercel/next.js/discussions/54075
there's a proposed answer they are looking to implement
but the easiest way at this point is just to use client components for places where you need to keep the data fresh
i use react-query and prefetch it on RSC then in the client component consume that prefetched data and then it's all client side refreshing from there
Asiatic LionOP
That discussion definitely cleared it up for me. Yeah I agree that that’s the best current pattern. Thanks again!