[Help] nuxt generate doesn't make the page contents static

[mtskf]

I'm trying to make a Storyblok website fully static. With the following code, "nuxt generate" creates html files aligned with the page routes. However, it still dynamically queries the Storyblok API to retrieve the page contents on the first page load.

<template>
  <StoryblokComponent v-if="story && story.content" :blok="story.content" />
</template>

<script setup>
  const { slug } = useRoute().params
  const path = slug ? slug.join('/') : 'home'
  const story = await useStoryblok(path, { version: 'draft' });
</script>

I'd appreciate if you could advise how to make them fully static. Thanks 😊

[mtskf]

I found using useAsyncData can make the contents static with nuxt generate, but it doesn't update content on client-side when the route is changed (NuxtLink is clicked)...

<script setup>
  const { slug } = useRoute().params
  const path = slug ? slug.join('/') : 'home';

  const { data:story } = await useAsyncData( 'story', async ({}) => {
    const story = await useStoryblok(path, { version: 'draft' });
    return story.value;
  });
</script>

[alexjoverm]

Hi @mtskf, I think this is more an issue with Nuxt 3 than our SDK. By today, Nuxt 3 static generation feature is still under development https://v3.nuxtjs.org/guide/deploy/static-hosting/ so we cannot yet give a proper answer to this

[alexjoverm]

By the way, within the asyncData function you're returning the story.value, maybe you need to return just story? By returning the value, you're unwrapping the reactive ref and maybe the reactivity is lost

[danielkellyio]

I was able make it work without using the asyncData function but it took some doing to figure out some kind of cache issue was to blame.

This worked when running npm run dev

<script setup>
const story = await useStoryblok("home", { version: "draft" } );
</script>
<template>
  <StoryblokComponent v-if="story" :blok="story.content"></StoryblokComponent>
</template>

Then in order to generate I ran npm run generate and it failed to work with JS enabled in the browser. However, if I delete the node_modules directory and npm install again BEFORE generate then everything works as expected (data is in the generated HTML)

[Dawntraoz]

Hi @mtskf, we have created the useAsyncStoryblok composable, so it is easier for you to implement an SSR/SSG website. Please update the SDK to https://github.com/storyblok/storyblok-nuxt/releases/tag/v4.4.0 and thanks for pointing this out 🤗