Update server data after server action

[SonofNun15]

export default function Component({ searchParams: { date }}: { searchParams: { date: Date } }) {
  const data = await loadDataForDate(date);

  return <MyClientComponent data={data} />
}

I'm using a query parameter to load some data that I'm passing in to a client component.

This client component calls some server actions which update the data.

All of the examples that I've seen online tend to use revalidatePath('/') to cause the original data fetch to be refreshed, but if this query is a heavy query that pulls a lot of data is there a way to update part of the data object with the response from a server action?

I had this implemented via useState originally. I passed the data as the initial state for a useState call and then set the state with updates after a server action returned data.

The problem with this approach is that links that update the date query param do not cause the data to get updated because it is being cached in client side state.

Is the only solution really to use revalidatePath()? What other options are there for updating the data via server actions?

[SonofNun15]

I'm wondering if I can use useOptimistic to make this work. Optimistically update the data before calling the server action and then if the data is ever refreshed it will just update the optimistic to match.

[singuerinc]

I would say you are correct. This way your server (db) and your client (state/context) will have updated data. It can only be a problem if multiple clients update the data in the db, you'll only see those changes by refreshing the page, but you had the same issue in SPA.