[BUG] bfcache Issue
Is there an existing issue for this?
- [X] I have searched the existing issues
Current Behavior
That's the problem
That could be a solution https://github.com/nuxt/nuxt/pull/23667
Expected Behavior
The Issue is not shown anymore in Lighthouse for the demo-store. The demo-store works like before without any errors.
Steps To Reproduce
No response
Environment
No response
Anything else?
Another related https://github.com/shopware/frontends/issues/539
Currently having the same issue, no dependencies seem to interfere with it.
I was researching a lot today about that issue. :mag:
I assume that the issue comes from nuxt i18n module.
So I created a empty nuxt/vite project with that command:
pnpm dlx nuxi@latest init <project-name>
Testing this in preview mode is important because Vite is opening a WebSocket in dev mode, which can also cause an issue with bfcache.
So the steps for testing are:
- pnpm build
- pnpm preview
- Open the Page in a Chrome Browser
- Open Dev Tools -> Application -> Back/Forward Cache -> Click on Test Button
Result:
- Blank Nuxt/Vite Project -> No bfcache Issue :heavy_check_mark:
- Blank Nuxt/Vite Project + i18n module -> bfcache Issue :x:
Somehow I assume it has something to do with detectBrowserLanguage function. But not sure about that. :confused:
Created an Issue here: https://github.com/nuxt-modules/i18n/issues/2876
Today, I tested again with the Blank Nuxt/Vite Project + i18n module and can not reproduce the bfcache Issue anymore. This is great 🎉
So, it would be super cool to eliminate that problem in the demo-store template. 💡
Currently, we are using @nuxtjs/i18n in version 8.3.1, and I guess we need to update package.json to ^8.5.5.
But when I execute this command:
pnpm run generate && pnpm run preview
I got a lot of warnings and errors. So, we need to fix the generate command first.
So when I update @nuxtjs/i18n and comment out this part in app.vue:
//useBroadcastChannelSync();
We do not have any bfcache Issue anymore:
FYI @mdanilowicz