Refresh a single React Server Componetns
I have a dashboard where I want a certain piece of data to update every 10 seconds, what's the best way to do this with Server Components? The only approach I've found is to use
startTransition and router.refresh() inside a useEffect with an interval.8 Replies
Data Fetching: Revalidating
Learn about revalidating data in Next.js using Incremental Static Regeneration.
this is for app router only
for pages router you could try something like https://swr.vercel.app/
React Hooks for Data Fetching – SWR
SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
Also for this pattern it might be worth considering just fetching the data on the client via trpc/an api endpoint
this would require to refresh the page right?
Yeah this is what I might end up doing, kind of frustrating that there isn't a way to re-fetch a single component
If we could not sure which would be best was thinking bout this some more and made a diag, alot of teh advantages/disantvantages might be negligible, also not sure about certain implementation details xD
I'm no expert in this topic, but generally servers will have way more compute power than any consuming device, therefore most advantages on the API approach aren't that important.
As for the RSC, the main disadvantage would be running the requests on the server and sitting on a loading screen until they're complete, you can always use Suspense to have a loading screen while that happens, and if you're using adequate caching, maybe something like SWR, it would still not be that long. I definitely think there should be a way to refresh server components ( and their children ) individually instead of doing a full page refresh with
router.refresh() inside a transition.
I really appreciate the effort you put in the diagram, thank youAh makes sense then only real advantage of api seems to be responsive to client state & less compute used on serv. Ye seems like would be cool to have selective component refreshes from the server. Np ty for info