SSR useAsyncData still calling the API in client side?
Here is our scenario, when I initially load the page, the API call is made via server side only, no API call from the CMS visible. After navigating to another page (without exiting the site) and then returning to the original page, the developer tools show that the API call is triggered again on the client side. Is there a way to prevent this?
We tried getCachedData but still the same behaviour. We just want to block the navigation I guess. This was possible in Nuxt2.
10 Replies
Here is our code sample
<script setup lang="ts">
import { metaDesc } from '~/utils/seo'
const nuxtApp = useNuxtApp()
const { data: pageData } = await useAsyncData('homepage', () => useCmsPageQuery('/'), {
getCachedData(key) {
return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
}
})
useHead(metaDesc(pageData?.value?.data?.seo))
</script>the call shouldn't happen again if the data is present and you use
getCachedData 🤔
A reproduction would help!Hello Alex! I always watch your video. Thank you for responding. Actually yes you are correct. Its an incorrect description.
The API call won't happen again if you visit the page but, when I navigate to another page (first visit), and check the network tab, you could see the API call from our proxied CMS being shown in the dev tools. I guess our goal is to prevent this and for Nuxt to render the page on server side without calling the API in the client side? Is this possible?
then the page is not correctly prerendered during the build process
You can verify that and check whether the payload file exists in the .output/ folder
Yep I understand that, but this is SSR, and not static pages. Our data is pretty dynamic and changes a lot in the CMS side. Before we could do this on Nuxt 2, just using asyncData. It will call the APIs in the server side (without calling it in the client side) before serving the page.
Is this still possible in Nuxt 3?
ah yes, then it is fully normal to call the API during client-side navigation before serving he page as long as you await the call (as you do here) and it is not lazy.
Thanks for confirming, Alex. Although, can we hide that client-side navigation API call?
nope! (Unless you e.g. use a server component)
Or you do a full page refresh with an
<a> tag but that is bad for UX and perfI see. Thanks for confirming. We thought we could do the same behaviour as we did with Nuxt 2.
I'm not sure if Nuxt 2 has the mentioned behavior to be honest. It should also do a re-fetch on the client-side when the data isn't available while blocking nav