Nuxt 3 SSR: useFetch() or useAsyncData returning null on page refresh

Question

Please help me. I have Nuxt 3 project which I need SSR. This is a new generate project, which I didn't change any default config other than stated in here. I'm using composition API.

Here is the Vue & config file

test.vue

<template>
    <div>
        <NuxtLink to="/">balik</NuxtLink>
        <p>{{data}}</p>
    </div>
</template>

<script setup lang="ts">
const fullUrl = "https://fakestoreapi.com/products"
const data = ref({})

onMounted(async () => {
    data.value = await useFetch(fullUrl, {
        server: true,
        immediate: true 
    });
    console.log("mounted", data.value);    
})

onServerPrefetch(async () => {
    data.value = await useFetch(fullUrl, {
        server: true,
        immediate: true
    });
    console.log("server", data.value);
    console.log("************************");
})

data.value = await useFetch(fullUrl, {
    server: true,
    immediate: true
});
console.log("======================");
console.log("setup", data.value);
</script>

nuxt.config.ts

export default defineNuxtConfig({
    routeRules: {
        "/test": { ssr: true }
    }
})

Here is the console from server

setup {
  data: RefImpl {        
    __v_isShallow: false,
    dep: undefined,      
    __v_isRef: true,     
    _rawValue: null,
    _value: null
  },
  pending: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: false,
    _value: false
  },
  error: ObjectRefImpl {
    _object: { gE1Y7EtyZS: [H3Error] },
    _key: 'gE1Y7EtyZS',
    _defaultValue: undefined,
    __v_isRef: true
  },
  status: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: 'error',
    _value: 'error'
  },
  execute: [Function (anonymous)],
  refresh: [Function (anonymous)]
}
server {
  data: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: null,
    _value: null
  },
  pending: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: false,
    _value: false
  },
  error: ObjectRefImpl {
    _object: { gE1Y7EtyZS: [H3Error], uD8NPFvkOs: [H3Error] },
    _key: 'uD8NPFvkOs',
    _defaultValue: undefined,
    __v_isRef: true
  },
  status: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: 'error',
    _value: 'error'
  },
  execute: [Function (anonymous)],
  refresh: [Function (anonymous)]
}

The problem is everytime I refresh the page, I only get null data. But if I change page from / to /test, it work. I also tried to disable ssr from routeRules, it work, but I need ssr to be true.

I already read from this stack overflow question from here, but none of them work.

What I have done:

Change to data.value = await useAsyncFetch("products", () => $fetch(fullUrl)) in all useFetch
Update nodejs to v18 (I tried v18.13 and 18.18.2)
Update nuxt to latest ("nuxt": "^3.8.1")
Change to node 16 (because from the previous article some said that change to node 16 helped)
Tried nextTick, only worked on client side. I need it on server side.

Am I missing something in here? Or is there any tutorial using ssr to fetch data, because as long as I find tutorial they always either ssr: false or it's just the code and when I tried the same code it didn't work. Or is this unresolved issue from Nuxt 3?

Note: I will add param to refetch the data.

Any update on this? I am seeing this issue across multiple projects. Following the documentation and various solutions everywhere no solution appears to work. — trevster344
– trevster344, Commented Dec 6, 2023 at 20:36

Adrian Mole · Accepted Answer · 2024-02-17 13:42:15Z

0

I used to have the similar problem. When I used useAsyncData, I saw null value in a console output. I don't know why. Maybe some cache problems. But useFetch works fine. Just use onResponse interceptor to get your data.

// make the request
const { data, error } = useFetch(`${appConfig.api.baseUrl}/user/check-auth-token`, {
    method: 'post',
    headers: {
        Authorization: `Bearer ${authToken.value}`
    },
    onResponse({ response }): void {
        const dataStore = useDataStore();
        dataStore.updateUserData(response._data.data as ServerUsersUserData);
    }
});

edited Feb 17, 2024 at 13:42

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Feb 16, 2024 at 20:45

makis83

11 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nuxt 3 SSR: useFetch() or useAsyncData returning null on page refresh

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related