[FEATURE] Next js custom Cache Handler

[eposha]

Is your feature request related to a problem?

Using cloudflare cache (KV, R2) for ISR and ISR on-demand is very expensive for marketplaces.

Describe the solution you'd like

Provide Next js cache handler

Describe alternatives you've considered

Implement custom cache handler

@opennextjs/cloudflare version

1.0.0-beta.2

Additional context

No response

Before submitting

• I have checked that there isn't already a similar feature request
• This is a single feature (not multiple features in one request)

[james-elicx]

OpenNext apps use the incremental cache, tag cache, and queue that are defined in your app's OpenNext config. You can provide custom versions of these instead of using our pre-made ones if needed.

https://opennext.js.org/aws/config/custom_overrides#custom-incremental-cache

You can reduce the amount of requests made to R2 by wrapping the adapter in a long-lived regional cache and opting out of lazy updates on cache hits, e.g.

withRegionalCache(r2IncrementalCache, {
  mode: 'long-lived',
  shouldLazilyUpdateOnCacheHit: false,
})

If you have suggestions for optimisations that you'd like to see, feel free to let us know.

[vicb]

very expensive for marketplaces.

What does "very expensive" means?
What is the reference point?

@james-elicx added an option to add regional cache above.

Feel free to re-open when you can provide more details.

[eposha]

@vicb Imagine a marketplace website. A user is browsing a list of products. 100 products enter their viewport, and Next.js triggers prefetch for all of them. And that’s just one user. When there are many users, the cost of ISR and ISR on-demand becomes very high. That’s why I’d like to have a simple way to use a custom cache.

Please let me know if I'm mistaken

[james-elicx]

100 products enter their viewport, and Next.js triggers prefetch for all of them. And that’s just one user. When there are many users, the cost of ISR and ISR on-demand becomes very high. That’s why I’d like to have a simple way to use a custom cache.

Prefetching links can be disabled if needed. As written above though, you can provide your own cache adapters in your OpenNext config file, or use a long-lived regional cache with background updates disabled.

It would be good to understand how you think it could be improved as we could potentially include some of those changes in our official adapters.

[conico974]

I don't think that is something we'll support this way. A custom cache handler will break a few things in OpenNext

BUT As james pointed out you can easily customize things to use your adapters. (which is essentially the same things as the Next.js custom cache handler)
We could add more docs to it though (or just point to the aws docs)

[eposha]

@conico974 @james-elicx I see that you have a cache.js file in aws/dist/adapter which is responsible for cache writes and revalidation. As far as I understand it is implemented based on Next.js cache handler with some additions. It would be nice if this file could be independently passed and manage caching independently. This way the user could add his own cache management logic such as redis, any Durable Object and so on

[conico974]

@eposha We've been telling you that this is already possible.
In open-next.config.ts you can use your own Incremental and Tag Cache.
If you want to use redis, feel free to do so.
https://opennext.js.org/aws/config/overrides/incremental_cache
https://opennext.js.org/aws/config/overrides/tag_cache

[eposha]

Yes, thank you. I'll try to implement it later

[eposha]

I tried implementing a custom cache handler as suggested in the documentation you shared earlier. In my opinion, it's quite difficult to implement. The override feature (from the OpenNext documentation) doesn't work in dev mode, which makes it really hard to debug when trying to fully override incrementalCache, queue and tagCache.

My suggestion is to add a customCacheHandler (or something like that) option to open-next.config, which would replace packages/open-next/src/adapters/cache.ts.

I just want to attach a screenshot of the DOShardedTagCache metrics, where I opened a Next.js-based marketplace that triggers prefetching of item pages (I know it can be disabled, but that’s not what I need), and within a few seconds, I paginated through the item list. You can see that the cost of DO alone would be very high.

[conico974]

My suggestion is to add a customCacheHandler (or something like that) option to open-next.config, which would replace packages/open-next/src/adapters/cache.ts.

That is not something that i'd want to add honestly, this will break a lot of things in OpenNext itself when there is already a solution for the overrides.

I just want to attach a screenshot of the DOShardedTagCache metrics

There is a regional cache option that will reduce the load on the DO https://opennext.js.org/cloudflare/caching#tag-cache-for-on-demand-revalidation
But browsing as a single user won't show you much of these benefits