Example showcasing a cache-first strategy for the new 'use cache' directive

[marcofugaro]

Goals

I am trying to implement the cache-first strategy for caching in my app.
Basically the cached version is shown first, and then a new request is made on the server to get the freshest data. If the data is more up to date, the shown data is updated or the user is prompted to update it (kinda like x.com has been doing for years).

An example showing this pattern with the new 'use cache' and expireTag() tools would be really helpful.

Non-Goals

Background

With the classic client-only react you would be able to implement this pattern really easily, basically have a global state which holds the data in-memory, and when the user navigates to the specific route the second time, show the in-memory data first, while fetching the up-to-date data in the background.

Proposal

Right now it's probably possible using startTransition in a client component to expire the tag, but is there an easier way to do this? An official example would be useful.

useEffect(() => {
  startTransition(() => {
    expireTag('products')
  })
}, [])