Vue: serverCacheKey generation from vuex store

[nickdandakis]

I'm working on a Vue application with vuex, vue-router and SSR. A lot of pages and components are driven from data coming from Contentful (CMS) which is fed into the vuex store.

I'd like to implement component caching, but construct the serverCacheKey with data from the vuex store. Currently, only props is available and I don't see a workaround. Is there any reason only props is available? Is serverCacheKey called before the vuex store settles (before preFetch fires)?

[yyx990803]

serverCacheKey is intentionally limited to props because component caching is tricky to get right. Directly using vuex store state can very easily lead to cache keys that are too loose (i.e. returning cached result when it actually needs to re-render)

Components that need to be cached should be designed to be decoupled from vuex stores and only accept props.

[shreyas-a]

@yyx990803 is there a callback or a way to check if there is a cache hit?

[johndays]

@yyx990803

serverCacheKey is intentionally limited to props because component caching is tricky to get right. Directly using vuex store state can very easily lead to cache keys that are too loose (i.e. returning cached result when it actually needs to re-render)

Components that need to be cached should be designed to be decoupled from vuex stores and only accept props.

Hey there :) firstly, thanks for your amazing work

How we should handle the

serverCacheKey

if we have components with localisation? let's imagine a component that naturally has different text for EN and FR.

Shouldn't we cache them at all? or should we pass the locale as a prop to each component? (seems quite a lot of overhead)

It seems a bit unclear and never checked a real example of a project which uses i18n and component-caching.