Component Level Caching

[R5dan]

Goals

1. Let you cache and invalidate a component based on its props
2. Cache components across routes
3. Let you embed dynamic children for the component (opaque list that can only be passed to the return / jsx value) (this is an even better if situation, nice to have but my main wish is for the top 2)

Non-Goals

No response

Background

This allows you to do things such as put cached content behind a auth wall, or decide exactly what you want to cache.
Currently you can do this by making a fetch request with all the revalidation options. However to programtically revalidate it, you have to use revalidateTag which limits how many components you can cache (especially once you start adding props)

Proposal

Have components have lots of the same caching options as a page.
Add a revalidateComponent server function which takes the component function and an optional selection of props (if not given, revalidate all instances)

I am happy to contribute this, but wouldn't know where it is all done.

[icyJoseph]

Hi, cacheComponents will, more or less do this.

https://nextjs.org/blog/composable-caching

[R5dan]

@icyJoseph ok, a bit embarrassing that I forgot about that and somehow didn't see it whilst looking through the docs, you might notice that the donut idea came straight from reading the docs about this earlier on. That is what I need, so I am changing this feature request to just be the revalidateComponent (might be better to be called the revalidateCache now though. As I was looking through the docs there it was using tags for revalidation, which does quickly become a limit.

[R5dan]

Actually, that was another misconception of mine. @icyJoseph am I now correct in saying that there is no "global" limit on the number of tags you can have? Is there just a limit on how many tags you can have on a per item basis?

[icyJoseph]

Let me double check if the limit also applies to cacheTag, because yeah fetch.next.tags did have a limit on the max number of tags per item.