StoryblokComponent vs component

[m0zz094]

I get huge performance issues when using the StoryblokComponent instead of component:

example using component: https://family-business-unit-f0hhivfwp-cloudnova-srl.vercel.app/

example using StoryblokComponent: https://family-business-unit-6nuzynxzr-cloudnova-srl.vercel.app/

[alexjoverm]

Hi @m0zz094 thanks for this issue! I'm curious about this, because StoryblokComponent is a basic wrapper of component as you can see https://github.com/storyblok/storyblok-vue/blob/main/lib/StoryblokComponent.vue

Have you investigated this further?

[alexjoverm]

@manuelschroederdev keeping you on the loop

[m0zz094]

Hi @alexjoverm, I haven't investigated this further, but if you need more context here's what I'm doing on [...slug].vue

`<script setup>
const route = useRoute();
const version = route.query._storyblok ? "draft" : "published";
let story;
const path = route.path.replace("/en", "/");
const language = getPageLanguage(); //Simple composable I made to get the current page language
if (version == "draft") {
try {
story = await useStoryblok(path == "/" ? "home" : path, {
version: version,
language: language,
resolve_relations: "global-component.global_component",
});
} catch (e) {
throwError(e);
}
} else {
const storyblokApi = useStoryblokApi();
const { data } = await useAsyncData(language + route.path, () =>
storyblokApi.get("cdn/stories/" + (path == "/" ? "home" : path), {
version: version,
language: language,
resolve_relations: "global-component.global_component",
})
);

story = data.value.data.story;
}
</script>`

[manuelschroederdev]

Hey @m0zz094, could you possibly provide a link to your complete project on GitHub or StackBlitz? That would make it a little easier for us to debug the issue. Thanks. 😊

[manuelschroederdev]

I've create two different versions of a demo project, one using the StoryblokComponent, one using the default component. I've uploaded them to Vercel and couldn't identify any notable performance differences.

https://storyblok-components-test.vercel.app
https://components-test-inky.vercel.app

Are you still encountering these issues?

[Lauritzz77]

If you look at the page source on the the two links, there is a big difference, the https://storyblok-components-test.vercel.app/ does not generate the static markup and https://components-test-inky.vercel.app/ does.. Maybe there is a bug in StoryblokComponent?

[caroillemann]

I'm also experiencing the issue with the StoryblokComponent.

Here's a comparison of the markup generated for the two test sites @manuelschroederdev set up with Javascript disabled.

Notice that the component markup is only generated on https://components-test-inky.vercel.app/

[manuelschroederdev]

Thank you very much for pointing this out, @Lauritzz77 and @caroillemann. We will investigate this further and get back to you as soon as possible.

[alvarosabu]

Hi, @m0zz094 do you know if this is still an issue? @manuelschroederdev @Dawntraoz any update from our side?

[m0zz094]

Hi @alvarosabu, I haven't changed my codebase since then honestly, I'm still using the component approach for now

[Dawntraoz]

As per the abovementioned issue, this behavior was fixed from v4.x.x -> #204 (comment).

Can you @m0zz094 replace your solution with StoryblokComponent using a v4.x or above of this package so we can be sure this issue can be closed <3 Thanks in advance!

[alvarosabu]

Any updates @m0zz094?