How to refresh a single component
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
New to NexJS way of doing things, so plz pardon me
I have a server component, tht renders list of cards, each card has a button, clicking on it triggers action on server and fetches some data from a remote api.... now I want to refresh the single card on ui with new data tht just arrived from api....
how could i update the card component, after the action was performed?
Thanks
I have a server component, tht renders list of cards, each card has a button, clicking on it triggers action on server and fetches some data from a remote api.... now I want to refresh the single card on ui with new data tht just arrived from api....
how could i update the card component, after the action was performed?
Thanks
1 Reply
for that you should use a clientside fetching library. Example for that are SWR or React Query. Both are good. I recommend React Query. Then pass into your query the initial data that you got from your server (via props) and set the revalidate action (the fetcher) to your server action. Now you can extract the data from your query and it will be automatically changed inside the component, when you click the button