So I have a table that sort of acts as a form per row. Think about a summary table with an action per row. The table is rendered on the server with a client component in one of the fields in the row that then triggers a server action when pressed.

If the action is valid it will run a DB update that is related to that row. Since it's a server component, the user is forced to refresh to get the new data to show up. Below is a simple snippet of what I'm doing.

What's the best way for me to trigger an action related to that same row and have it reflected in the UI without refreshing?

Must I move this table client side so I can change the state? Is there a way to revalidate that component somehow and have the server return it again without the feel of a refresh?


<ServerSideTable
rows={tasks.map((task) => {
return {
action: <ClientComponentWithServerAction/>
....