Question about how to use getCachedData properly (server-side)
Hey everyone,
I recently saw "Nuxt 3.8 - Client-side caching with getCachedData ✨" by Alexander Lichter https://www.youtube.com/watch?v=aQPR0xn-MMk
I have three questions about it, couldn't find in the docs.
1. Where is this cached data stored - in RAM server-side?
2. When is this data cleared if I use
default? Or only if I restart nuxt?
Use case in my project:
- Footer.vue file --> lazyFetch() to /nuxt/server/api/get-footer-data.ts (server-side)
- /nuxt/server/api/get-footer-data.ts --> retrieves data from REST API from CMS
- best case scenario is that all calls happen server-side, no need for client-side fetching
3. For server/api/get-footer-data.ts endpoint, I implemented redis caching to cache the REST API calls, add http cache control headers, TTL, etc. => is it a good choice to use getCachedData + other caching solutions?
Thanks very much for any pointers!
Cheers, MatthiasAlexander Lichter
YouTube
Nuxt 3.8 - Client-side caching with getCachedData ✨
⚡️ Nuxt 3.8 was released just a day ago, packed with lots of amazing features. Among the updates, one change for
useFetch and useAsyncData is pretty significant IMO - getCachedData. In this video, we will explore how that function can avoid superfluous calls to an API and cache data for visitors on the client, either until a hard-reloa...2 Replies
Hi @m_andrasch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hi Matthias,
Let me address your questions about
getCachedData in Nuxt 3:
1. Where is cached data stored server-side?
The data from getCachedData is stored in the Nuxt payload. By default, this is how the caching mechanism works:
As shown in the useAsyncData documentation, this data is stored in the Nuxt payload, which is passed from server to client during hydration. Server-side, it's stored in memory as part of the Nuxt application context.
2. When is cached data cleared?
The cached data persists for the duration of the server process. If you restart your Nuxt application, the cache will be cleared. You can also manually clear the cache using the clear() function that was added in Nuxt 3.11, which will:
- Set data to undefined
- Set error to null
- Set status to 'idle'
- Mark any pending requests as cancelled
As mentioned in the useFetch documentation, this function is part of the return values from useFetch and useAsyncData.
3. Using getCachedData with Redis caching
Using getCachedData alongside Redis caching for your server API endpoint is a good approach for a layered caching strategy:
- Redis caching at the API level helps reduce load on your CMS
- getCachedData helps prevent duplicate fetches during SSR and client hydration
This is particularly beneficial for your footer use case, as it's a component that appears on multiple pages. The server storage documentation shows how to set up Redis storage in Nuxt.
For your specific implementation, you could:
1. Use Redis to cache the CMS API responses with appropriate TTL
2. Set HTTP cache headers for browser caching
3. Use useFetch with getCachedData to prevent duplicate fetches during hydration
This multi-layered approach ensures optimal performance while keeping your data reasonably fresh.
If you need to force a refresh and bypass the cache, you can use the refresh() function with the force option that was implemented in a recent update.
Hope this helps with your implementation!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@810922612842692620> Kapa.ai is still learning and improving, please let me know how I did by reacting below.