Optimistic updates for data that lives in completely different server components?

[romeovs]

Summary

I'm building a webshop that uses the same bit of state (the users' cart) in different components across the page.

The cart data is fetched on the server using server components, let's say by a fetch to api.shop.com/carts/{id}.

AFAICT, this means that the only way to "share" this bit of state between all the different server components that use it is to just fire off the fetch multiple times and rely on Next's request deduplication.

However, there are also some (client) components that update the cart (ie. the "add to cart" button, or the "remove" button on the checkout page).

These components also read the same bit of data, but wrap it in a useOptimistic call to render optimistic updates on the client for a snappier UI.

This useOptimistic wrapping is limited to the scope of the client components though. So while their UI will be snappy the rest of the UI will lag behind until the update actually goes through and router.refresh gets called.

Is there a way to reliably share the optimistic updates for these bits of state?

Normally I would try lifting the shared state into a context, but that makes it harder to rely on Suspense to keep the components that rely on this state from blocking the initial page render.

I've tried syncing the state of each component using BroadcastChannels (which has the benefit that it can sync state between different tabs), but it's hard to reconcile the approach with useOptimistic. You can try out this approach on the synced branch in my example repo.

My attempts at syncing the state with optimistic updates live in the optimistic-synced branch.

Example

https://github.com/romeovs/next-optimistic-shared-components