When the cache is applied, a second rendering occurs

[ideacco]

What is your question / Please describe your issue

Hi guys, I have a headache, according to the documentation, I integrated '@vue-storefront/redis-cache', and in a certain page, set the useCache() and addTags() functions and .

When I load the page for the first time, I find that the redis database has the data I just cached!

In order to verify that the cache is valid, I modified a part of the data directly in the redis server.

But when I re-refresh the same page, strange things happen, I see the redis data I just modified, but it disappears right away, and then it's back to the original data.

Am I missing something?

I suspect that after my cache takes effect, the render function is triggered again...

What version of Vue Storefront are you using?

2.5.6

Code of Conduct

• I agree to follow this project's Code of Conduct

[Fifciu]

There is a mismatch between server-side rendered output (which comes from Redis) and VDOM built by Vue client-side during the Hydration process - Vue cannot match the structure built locally with the structure received from the server - that's why in development mode it causes full-rerender client-side (which is the blink you've described) - and in production mode, it will break the app. It has been described in old Vue2 SSR Docs:

According to the SSR hydration docs:

In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. In production mode, this assertion is disabled for maximum performance.

The described issue is not related to our Redis driver but to the Vue, that's why I am going to close the issue.

As you are getting a modified SSR output from the Redis - it means the Redis driver works correctly, as it serves what's stored in Redis instead of rendering it from scratch server-side.