Nuxt•3mo ago

fetch data once, then cache to reuse in other places

I'm using pinia stores but say for something simple like calling my server route to get my referral code which I want to display in different places on different pages what approach makes the most sense for this? say i need the referral code on a specific page and then in a component. what's the clean simple way to do this?

5 Replies

kapa.ai•3mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- For your use case—fetching a referral code once from a server route and reusing it across different pages and components—the cleanest and most SSR-friendly approach in Nuxt is to use the useAsyncData or useFetch composable with an explicit key, and then access the cached data using useNuxtData wherever you need it. Recommended approach: 1. Fetch the data once with a key: In a top-level page or layout (or even in a plugin if you want it available everywhere), fetch your referral code using useFetch or useAsyncData and provide a unique key:

<script setup lang="ts">
// Fetch referral code and cache it with the key 'referral-code'
const { data: referralCode } = await useFetch('/api/referral', { key: 'referral-code' })
</script>

<script setup lang="ts">
// Fetch referral code and cache it with the key 'referral-code'
const { data: referralCode } = await useFetch('/api/referral', { key: 'referral-code' })
</script>

Data Fetching 2. Reuse the cached data elsewhere: In any other page or component, access the cached value using useNuxtData with the same key:

<script setup lang="ts">
const { data: referralCode } = useNuxtData('referral-code')
</script>

<script setup lang="ts">
const { data: referralCode } = useNuxtData('referral-code')
</script>

useNuxtData This ensures: - The referral code is only fetched once (on the server or client, depending on rendering mode). - No duplicate network requests. - The data is available reactively and SSR-safe across your app. Why not just use Pinia?
Pinia is great for global state, but for simple, fetch-once data that is SSR-friendly and automatically hydrated, Nuxt’s built-in data fetching and caching system is more straightforward and avoids manual state management or hydration issues. Summary:
Use useFetch or useAsyncData with a key to fetch and cache your referral code, then use useNuxtData with the same key to access it anywhere in your app. This is the cleanest and most Nuxt-idiomatic solution for your scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

gamsbumps•3mo ago

@kapa.ai what if the user starts by the slug page? should I check if I already have the referralcode and if I have, dont call the api, but if I dont, i call it?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If the user starts by visiting the slug page (or any page where the referral code is needed), you do not need to manually check if you already have the referral code before calling the API—as long as you use useFetch or useAsyncData with a unique key. Nuxt will automatically cache the result and avoid duplicate network requests for the same key, even if you call the composable in multiple places (pages or components) during the same navigation or hydration cycle. For example, if you use:

const { data: referralCode } = await useFetch('/api/referral', { key: 'referral-code' })

const { data: referralCode } = await useFetch('/api/referral', { key: 'referral-code' })

in both your slug page and a component, Nuxt will only fetch the data once and share it between all usages with the same key. If the data is already available in the payload (from SSR or a previous fetch), it will be reused automatically. You do not need to add extra logic to check for its existence before fetching—it is handled for you by Nuxt’s data fetching system see docs. If you want to access the cached value elsewhere, use:

const { data: referralCode } = useNuxtData('referral-code')

const { data: referralCode } = useNuxtData('referral-code')

This will give you the current cached value, and if it’s not available yet, it will be null until the fetch completes see docs. Summary:
You do not need to manually check for the referral code before fetching. Use useFetch or useAsyncData with a key, and Nuxt will handle caching and deduplication for you, even if the user lands directly on a page that needs the data see docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@378737708303908864> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

fetch data once, then cache to reuse in other places

Did you find this page helpful?