Intelligently cache and bundle routeLoader$ requests

[DustinJSilk]

What is it about?

Bundle routeLoader$ requests based on Cache-Control settings

What's the motivation for this proposal?

Problems you are trying to solve:

• routeLoader$ are fetched with every prefetch, action, and navigation - this causes a lot of unnecessary requests
• Ensuring data from a routeLoader$ is not stale is only possible by reloading the page or through navigation

Goals you are trying to achieve:

• Allow caching each routeLoader$ independently
• Allow caching routeLoader$ for the current session
• Ensure data remains fresh during a session

Any other context or information you want to share:

An initial discussion of this idea started here: #171 (comment)

---

Proposed Solution / Feature

What do you propose?

• The frontend should send a list of which routeLoader$s are required when requesting q-data.json. This will allow the frontend session, browsers, and CDNs to cache routeLoader$s individually and only request the routeLoaders which are needed.
• A new cacheControl option called session will allow routeLoaders to be cached for the current session only or until the cache expires. Session cached loaders do not return an actual Cache-Control header as the routeLoaders are bundled together. The cache control settings would be returned in the JSON response and cached in memory.
• If must-revalidate is set on the cacheControl, Qwik will automatically refetch the routeLoader$ when it expires. This ensures data remains fresh and allows to add polling behaviour with minimal effort.

These are 4 sates of cache control and how this impacts request bundling:

• No cache control defined - loaders are requested and returned in the same response. This is the default and current behaviour which is non-breaking.
• Session cache control - loaders are requested and returned in the same response and are cached in memory on the frontend only. Only loaders which aren't already cached are requested.
• Private cache control - a separate request is made for each loader and requests are generally cached by the browser.
• Public cache control - a separate request is made for each loader and requests are generally cached by the CDN.

Default cache control or session cache control settings will bundle requests so that middleware only runs once for all loaders.
Private and public cache control settings will have any middleware run for each request. This should have a low impact as requests would be cached.

Code examples

This would be the new session based cache control settings. Qwik will automatically refetch the data after 600 seconds.

export const usePublicLoader = routeLoader$(({ cacheControl }) => {
  cacheControl({
    session: true,
    maxAge: 600,
    mustRevalidate: true,
  });
}

The signature for the cacheControl function would look like this:

interface SessionCacheControl {
  session: true
  maxAge?: number
  mustRevalidate?: boolean
}

cacheControl(cacheControl: CacheControl | SessionCacheControl, target?: CacheControlTarget) => void

---

Links / References

No response

[wmertens]

we also need to consider the security implications of letting the browser cache data that might be per-user.

Since q-data is only fetched for SPA, perhaps we should implement the caching layer ourselves with localstorage instead, and always serve it with no-cache.

[DustinJSilk]

Right I see. Even local storage would need to be manually purged when signing out. Session storage would be better as its scope to the current tab and would work for MPA and SPA.

Does it make sense to drop the proposed ‘session’ option and have the standard ‘private’ option cache to the session?

[wmertens]

This is being implemented in QwikDev/qwik#7979