Server Components Cache Mutations

[Rhxrrr]

Goals

1. Mutating Server Component Client Cached Data
2. Reduce API requets and refetches.

Non-Goals

No response

Background

When creating a server component like the following:
`
'use server';
import TirestockComponent from '@components/TirestockComponent';
import { fetchTirestock } from '@nextapi/fetchTirestock';

export default async function UsedTirestock() {
const fetchedTirestock = await fetchTirestock(condition);
return (

);
}
`
The fetchedTirestock is by default cached on client side. Which is great for optimization when navigating the data does not refetch unless you revalidate path. However when mutating the data and optimisticly mutating. When navigating to another page following the mutation and coming back to the page where the mutated data is present. Only the original cached data is present and not the mutated version of it. unless you invalidate the data. meaning you refetch the list. This is very ineffecient. if the list is large and the mutation is minor. you still need to refetch a large list for a minor mutation.

A great soluation is to update/mutate the cache on the frontend. This is present in React Query where mutating a cache is possible without refetching.

Proposal

Unfortunalty, im not that experienced with client caches. i have just ran into this problem on my project and revalidating the list is the only way.