Nuxt3 useFetch only retrieving data occasionally

Question

I'm a little bit confused with Nuxt 3 and the lifecycle of when it gets data. I understand that it's a universal rendering process, but I'm using Strapi 4 to manage content in my Nuxt 3 project and only occasionally do I retrieve the data via useFetch. The API route from Strapi never goes down so I'm probably just doing something wrong.

Here is my Vue file in Nuxt:

<script setup lang="ts">
const {data: works, pending, error} = await useFetch("http://localhost:1337/api/works", {
  params: {
    populate: "*"
  }
});
</script>

<template>
  <div>
    <div v-for="work in works">
        ... do something
    </div>
  </div>
</template>

I'm not sure how to get the content when the page loads. When I log the error returned, it's just true. But it's only sometimes. The content will load once, and then as soon as I refresh the page, it goes back to having an error. So I'm thinking something is getting cached maybe client-side? I'm really not sure what to do next.

Answer 1

Try passing this option to useFetch: initialCache: false. See more

Answer 2

Why not using Strapi module for Nuxt3? It handles all these issues. https://strapi.nuxtjs.org/setup