Support for Vercel Data Cache.

[Leftium]

Describe the problem

It would be nice if SvelteKit supported Vercel Data Cache.

Data Cache increases web site performance and reduces (external) API usage via fetch(). It is similar to, but different than ISR and Edge Cache (cache control headers).

This feature would probably be specific to the vercel-adapter, but bonus points for making it platform-agnostic.

My specific use case:

• The configuration for a web-site builder is stored externally (in a Google sheets document.)
• The configuration is shared and needed to render all pages on a site.
• If the configuration is changed, the cached results should be invalidated.
• The content for the pages is also stored in Google forms/sheets.
• The data from fetching the Google forms/sheets should also be cached and invalidated as appropriate.
• Instead of querying the Google sheets/forms every time a page is rendered, I would like to cache the results.
  • Requesting Google forms/sheets and transforming the data is relatively expensive.

Describe the proposed solution

• Vercel Data Cache integration, similar to SvelteKit ISR integration.
• OR if possible: documentation on how to use Vercel Data Cache from SvelteKit via fetch() request headers.

Alternatives considered

• SvelteKit vercel-adapter ISR
• Cache control headers
• Custom caching solutions

Importance

would make my life easier

Additional Information

No response

[ww-wolt]

Is there any workaround available for this? I am programming an events view widget which relies on data of a public google calendar. It would be great to be able to easily cache calls to the Rest API of Google Calender, without having to rely on external caching solutions like Redis.

[Leftium]

Is there any workaround available for this?

I have implemented something using Vercel ISR. The important bits of code are here:

• Route config
• GET() return statement
• optional HEAD()
  • This is for (preemptively) invalidating the ISR cache, but not returning the actual API results. (Also saving a call to the external API.)
• (The other code is just processing the results from Google.)

I haven't implemented an interface/API for cache-busting/bypass yet, but you just need to send a header with bypassToken.

• I have noticed requests with a bypassToken take a very long time, so use them sparingly. (1+ second vs 100-200ms fetch (stale cache) vs 10-50ms fetch (fresh cache))

If you don't need cache invalidation, you might be able to just use cache control headers

Limitations:

• Caching period must be hard-coded in config (you can create multiple endpoints with different periods).
• Not a generic fetch() wrapper: must create +server endpoint for each API you want to cache.
• The first time a request is made after the cache expiration: no matter how stale, the stale cached results are immediately returned (while fresh results are cached for the next call.)

[lilnasy]

Does Vercel document how a framework other than Next.js would implement Data Cache?

[mquandalle]

@Leftium One difference between ISR caching and Vercel data cache is that the later is persisted across deployments which you can't really workaround with your implementation. The only workaround I can think of is to manually use Vercel KV to implement a data cache.