[Nuxt 3.16] useFetch data empty on SSR

Let's take a basic api fetch:

<script setup>
const {
  data: initialData,
  status,
  refresh,
  error,
} = await useFetch("/api/test");

console.log("Data:", initialData.value);

const posts = ref([]);
posts.value = initialData.value ?? [];
</script>

<template>
  <div v-if="posts.length > 0">
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script setup>
const {
  data: initialData,
  status,
  refresh,
  error,
} = await useFetch("/api/test");

console.log("Data:", initialData.value);

const posts = ref([]);
posts.value = initialData.value ?? [];
</script>

<template>
  <div v-if="posts.length > 0">
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

This works totally fine in dev mode: the data value is populated upon navigating to the page and also on page reload. For some reason, this doesn't work anymore in production - even when I build the project locally. After reload, you can actually see the posts data render for a sec, but then they disappear again and the page is empty. The console.log on the client is also empty. So it seems like the data isn't really passed from the server to the client.

This used to work before and it also works in a new project. So there has to be something within my codebase preventing the fetch method from working correctly. I can't share the whole code here, but maybe you could give me a hint where to look?

Nuxt•13mo ago•

7 replies

plex

[Nuxt 3.16] useFetch data empty on SSR

Let's take a basic api fetch:

<script setup>
const {
  data: initialData,
  status,
  refresh,
  error,
} = await useFetch("/api/test");

console.log("Data:", initialData.value);

const posts = ref([]);
posts.value = initialData.value ?? [];
</script>

<template>
  <div v-if="posts.length > 0">
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script setup>
const {
  data: initialData,
  status,
  refresh,
  error,
} = await useFetch("/api/test");

console.log("Data:", initialData.value);

const posts = ref([]);
posts.value = initialData.value ?? [];
</script>

<template>
  <div v-if="posts.length > 0">
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

[Nuxt 3.16] useFetch data empty on SSR

Similar Threads

[Nuxt 3.16] useFetch data empty on SSR

Similar Threads

Similar Threads

Similar Threads