[Next 13 - App Router] Fetching Story returns an old Story Version from the Cache

[lx-maxhaslehner]

When trying to Upgrade to Next.js 13 with the App Router and saving a new story-state in storyblok, the old state gets returned from the storyblok api request. (And i think it´s a caching issue because when a "cv" param is provided - the correct data is received).

It´s interesting because the visual editor works, but as soon as I press save - the old data is received and displayed again. (A call in postman returns the right data)

Tried with the official https://github.com/storyblok/next.js-13-boilerplate (using storyblok/react) and with https://github.com/jpkha/nextjs13-storyblok/tree/main (using storyblok/js)

---

Expected Behavior

The Storyblok-js-client should return the correct value even with caching.

Current Behavior

The Storyblok-js-client does not return the current value - instead an old one.

Steps to Reproduce

1. Checkout https://github.com/storyblok/next.js-13-boilerplate
2. Provide access token from a storyblok space
3. Add a default component on the home page and save + publish.
4. Check the state on localhost:3000
5. Update the component state and check again. After at least 2 updates of the component state, the current state is not received anymore.
6. When adding e.g "cv: Date.now()" to the sb params, the newest state is received again.

[indyzz]

Just wanted to chime in that I've ran into the same problem with a Nuxt app and after a bunch of debugging I'm pretty sure the problem is this part

https://github.com/storyblok/storyblok-js-client/blob/main/src/index.ts#L173C3-L175C4

Together with

https://github.com/storyblok/storyblok-js-client/blob/main/src/index.ts#L568C7-L577C8

So the response is cached by CV from the request and if no CV is provided subsequent request will all default to the first one made, with no way of clearing it or mechanism for TTL

I'm not entierly sure what the purpose of cacheVersions is, it looks like a cache outside of the cache, which seems problematic since it provides no methods of clearing it.

Would love some kind of solution to this

[Barokai]

Also looking for a solution on this, is there any ETA on this?

[ui-jb]

EDIT: After starting up work again, I found that this workaround isn't working anymore. Sorry all!

Hi everyone,

I'm using storyblok-react (which uses storyblok-js-client) and my current workaround is to provide null for the cv property like this:

const storyblokApi = getStoryblokApi();
const home = await storyblokApi.get(`cdn/stories/home`, { version: "draft", cv: null });

I'm not sure if this is an ideal solution since it seems like caching isn't happening anymore, but this workaround allows me to continue development in the meantime.

[chrsbrmr]

Hi everyone,

I´ve just tried it again using @storyblok/react 2.2.1 and it seems to work for now.

[ui-jb]

Hi everyone,

I´ve just tried it again using @storyblok/react 2.2.1 and it seems to work for now.

I'm still having the same issue even after updating 🤔

[lx-maxhaslehner]

Hi everyone, I´ve just tried it again using @storyblok/react 2.2.1 and it seems to work for now.

I'm still having the same issue even after updating 🤔

We are currently using node 18.6 and next 13.4.12 - maybe this has also some effect?

[ui-jb]

We are currently using node 18.6 and next 13.4.12 - maybe this has also some effect?

That's it! Upgrading from next 13.4.4 to 13.4.12 did the trick! Everything's working as expected now 😄

[thiagosaife]

Closing this. Thank you gentleman for pointing that out.

[ui-jb]

This issue's popped up for me again despite updating storyblok/react to 2.2.1 and Next to 13.4.12 and using Node 18.

It seems like everything will work perfectly for a short time, followed by old cache hits for every call.

[barkertron]

I'm seeing the same behaviour too - node 18.18.2, next 13.4.16, storyblok/react 2.4.4

[IanBoyte]

Same as well: "@storyblok/react": "^3.0.0", "next": "^14.0.4",

[thiagosaife]

We'll look at this

[thiagosaife]

Gentleman. I'll close this one, because it was potentially solved with the latest version, using the custom fetch feature.