Issue with cached data returned in production

[acelletti]

We have recently added Storyblok to our portal and upon launching the new Home page, we realised pretty quickly that updates to the home page that we published were not being picked up on our site.

We use Nuxt 3 with @storyblok/nuxt version 6.0.6 (latest).

I have reached out to the help desk a few days ago and they suggested we use a webhook to trigger https://github.com/storyblok/storyblok-js-client#method-storyblokflushcache however this did not work for us as we had not switched the cache in production so it was set to cache: { type: 'none' }.

I have added some debug logs to the storyblok-js client to see what was going on under the hood (attached).
debug_logs.txt

From what I can see there are two issues that I would like to address:

1. We use several machines to host the website, how would we flush the cache for each one using webhooks? The only way that I can think of doing this is to use a shared cache like Redis, but could not find any plugin to do this in Storyblok.

2. The main issue seems to be that the value of CV is cached in memory under cacheVersions which is not reset by the flushCache command. So effectively even tho we have no cache, the server keeps requesting the same CV which is outdated and there is no way to fix this but to restart the machine. This behavior does not seem to happen on the draft API as this seems to ignore the CV value sent by the client.

3. What is the point of the cache.clear config? I have set it to both manual and auto for both draft & published and I can see no difference at all in the actual behavior of the client API.

[alexjoverm]

Hey @acelletti! Thanks for reporting the issue, I see definitely you did a great investigation there already (and btw, welcome to Storyblok!)

I see a couple of things here. Let's tackle them separately.

Distributed cache implementation

Related to you point 1, for the cases you need a distributed cache implementation, you have 2 approaches to accomplish that:

1. Custom cache implementation: if you use Redis as a distributed cache, you can use the custom cache and redefine the methods to read/write from Redis. I've just added this new docs example. Also, as you're using Nuxt SDK, you'll need to use the enableSudoMode option to define your own plugin, so you'll be able to implement those js-client methods.
2. Distributed webhook events: you can also have a proxy/dispatcher that receives the webhook from Storyblok and has the responsibility to dispatch the event (flush cache) to all the application instances. We have a small piece of doc on that.

Potential non-version cleaning

Related to your points 2 and 3, we might've found a bug that doesn't clean properly the cache version. We're investigating it and will keep you in the loop.

Hope this helps for now. Let us know how it goes!

[christianzoppi]

Hey @acelletti, thanks for the detailed report!

Point 2: I've created the PR #807 to fix this. The issue is actually intermittent because of a combination of factors, so we haven't spotted that earlier. With your input, we are completely getting rid of this issue.
Point 3: I think we can improve our Readme to better explain this. The cache set to auto will clear it automatically when you are getting the draft version of the content.

We'll merge soon the PR. Please keep us posted once you test it

[ChristophKna]

I am using the storyblok astro client (Version 4.0.5) and still have this problem with the following config:

apiOptions: { cache: { type: 'memory', clear: 'auto' } }

. But I made the observation, that the cache update works once. After that no changes on any story is reflected on the site.

[kairilliet]

Any updates on this? Working with pulling information from datasources and when changes are made to them, it is only reflected once then not again. Have the same setup as @ChristophKna above.

[muhammedneswine]

I also have the same issue as @ChristophKna mentioned. Works first time but it never clears the cache version.

[alvarosabu]

Hi @acelletti thanks for reporting this, this should be solved by this upstream merge on the js-client #847. We need to wait for the js-client v6.10.0 bump to reach the nuxt module to test it

[alvarosabu]

Hi @acelletti could you please check by upgrading the nuxt module to https://github.com/storyblok/storyblok-nuxt/releases/tag/v6.0.13 ?

Thanks

[mrsunshine]

@alvarosabu We have the same issue. After going all the code i found this and the other related cache bug tickets. I updated to storyblok-nuxt v6.0.13 (storyblok-js-client v6.10.1) but still have the problem. Seems it never executes the cacheResponse method which includes the check.

[mrsunshine]

I created a Stackblitz with a minimal app to reproduce the bug.
Please see the readme with a step by step guid to reproduce.

https://stackblitz.com/~/github.com/mrsunshine/nuxt-storyblok-caching-bug?file=README.md

[CaprinaeWT]

We're experiencing the same issue as @mrsunshine. Are there any updates on this?

[edodusi]

@mrsunshine @CaprinaeWT we are working on better documenting the cache behavior and to allow more control from the client apps, in the meantime if you are blocked by this issue my suggestion is to get the version attribute from a call to the endpoint /v2/cdn/spaces/me/, and use that value as cv parameter for the subsequent call to the stories endpoint.

This way you are sure to always get the latest content, because version and cv reflects the latest update time to the space.