N
Nuxt•2d ago
Looney

Client-side navigation still returns useFetch cache even though the cache has been cleared

I have a Nuxt 3 application with some API endpoints being cached with the defineCachedEventHandler() method. If I remove one of the caches with storage.removeItem(key); and refresh the page the new data is returned fine. But if I navigate client-side to another page and then navigate back to the page with the cached data, the old cache is returned. How do I avoid this? I have tried the following solutions: 1. Setting cache option on useFetch to "no-store" and "no-cache 2. Setting routeRules headers for all API endpoints with 'cache-control' to "no-store" and "no-cache". 3. Setting getCachedDataoption on useFetch to return undefined
2 Replies
kapa.ai
kapa.ai•2d ago
Hi @Looney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing is related to how Nuxt handles data caching with useFetch during client-side navigation. When you navigate between pages client-side, Nuxt will use the cached data from previous requests rather than making new requests, even if the server-side cache has been cleared. Why this happens When using useFetch, Nuxt caches the response data to avoid unnecessary network requests. This cache persists during client-side navigation, which is why you're still seeing the old data when navigating back to the page. Solutions Here are several approaches to solve this issue: 1. Use refreshNuxtData to force a refresh You can use the refreshNuxtData utility to manually refresh the data when navigating back to the page: 
// Force refresh specific data
await refreshNuxtData('your-fetch-key')

// Or refresh all data
await refreshNuxtData()
// Force refresh specific data
await refreshNuxtData('your-fetch-key')

// Or refresh all data
await refreshNuxtData()
This will trigger a new fetch request, bypassing the client-side cache Link to refreshNuxtData docs. 2. Add a unique key to your useFetch call You can force a new request by providing a unique key each time: 
const { data } = await useFetch('/api/endpoint', {
  key: `endpoint-${Date.now()}`, // Generate a unique key
  // other options
})
const { data } = await useFetch('/api/endpoint', {
  key: `endpoint-${Date.now()}`, // Generate a unique key
  // other options
})
This approach was mentioned as a solution to a similar issue Link to Stack Overflow answer. 3. Use the refresh function returned by useFetch The useFetch composable returns a refresh function that you can call to manually refetch the data: 
const { data, refresh } = await useFetch('/api/endpoint')

// Call this when you need fresh data
refresh()
const { data, refresh } = await useFetch('/api/endpoint')

// Call this when you need fresh data
refresh()
You could call this function in a page's onBeforeMount or similar lifecycle hook Link to data fetching docs. 4. Set cache control options You can explicitly set the cache option in your useFetch call: 
const { data } = await useFetch('/api/endpoint', {
  cache: 'no-store' // Prevents caching
})
const { data } = await useFetch('/api/endpoint', {
  cache: 'no-store' // Prevents caching
})
This tells the browser not to use any cached version of the resource Link to useFetch docs. Best practice For your specific case where you're manually clearing server-side cache, I recommend using the refreshNuxtData utility when navigating back to the page, or implementing a custom solution that calls the refresh function of your useFetch call when needed. If you need to ensure fresh data on every visit to a page during client-side navigation, consider using the watch option with route changes to trigger a refresh. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2d ago
<@284114506815242240> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?