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-reload or even with a custom TTL logic.

Key Takeaways:
🛠️ What is getCachedData
🚀 How to avoid extra requests if fetching data once is sufficient
⚡️ Where to put the logic for custom caching mechanisms

Links:

Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!

🌐 Connect further:

Chapters:

00:00 Intro
00:35 Explaining getCachedData in Nuxt 3.8
00:58 A simple getCachedData implemenetation
04:50 getCachedData with custom TTL logic
08:14 Summary

#Nuxt3 #vuejs #nuxtjs #webdevelopment #frontend #frontenddeveloper #caching #ssr #getCachedData

[chiebidoluchinaemerem]

You don't see quality content like this nowadays.
Simple and straight to the point 🤩

[Frank_DeWitt]

This video makes me check my fetch system in my current job and I find a big refactor to do, caching whole data! Thanks a lot, Alexander!

[don-cody]

Now my nuxt app perfomance just improved!. Thanks for the KNOWLEDGE

[germanmartirosyan]

Thank you, man! Your videos are the most useful and you tells about so important details!

[Endermanch]

Thank you so much! I was thinking about creating a server-side plugin and overcomplicating things, but this video was a savior! Nuxt is amazing! ♥

[kalebercanbrack]

Nuxt's data fetching/management tools are so freaking nice

[chstappert]

Thanks for your effort you put into these videos! Keep going!

[amardeepgill]

This is fantabulous! I am using it for an API that is protected using auth headers, so the TTL is critical in this situation. I think 1 hour is a good amount of time.

[Ayvengo]

Have a few questions 7:23
1) What does key mean ? What would it be for POST or GET request with params?
2) as i understand nuxtApp is a some sort of global variable like in many frameworks for hell a lot of purposes. But what if you have multiple async request how does it know which payload/static is required?
3) Isn't the app have to delete cached data if it expired to prevent memory leak?

[farsidd]

Very well explained. Although most of the developers don't use that feature. But it's perfect if you want to write quality code.

[zsoltgomori]

Awesome, thank you! I am wondering, though, about what is point of building out the caching layer by yourself if one could use existing solutions, offering caching of responses and more beyond that, out of the box? TanStack Query is a great example, if you ask me.

[elisepatrikainen]

Exactly what I needed! Besides, the video extremely clear and well explained! Thank you so much! 🙏

[randomtimessomehow]

What is the difference between getCachedData and useNuxtData? In my case I fetch user data in my app.vue. I'm currently doing this on every page load and want to cache it. Also, in my case data is always undefined when I reload the browser window, except when I navigate through pages, then it exists. Is this normal behavior?

[dbroox]

it seems like the cache does not work when you add `query` options that reactively change... which is a bummer.
i.e. if you add `query: { page }` to the useFetch composable, and navigate back and forth through pages, useFetch makes a request every time.

[EricMery]

Exactement ce que je recherchais et très bien expliqué ! Merci beaucoup👋

[designerjehovah]

awesome video right when i needed it...I ran into this very same problem and boy I did some shenanigans for my own caching mechanism. I wasn't aware getCachedData could be used this way. It would be great if the docs could add these small examples to some otherwise sparsely documented parts of nuxt like getCachedData. Thanks Alex for this video!!!

[horatiuranca]

thanks a lot for the effort you put in these videos!, just found your channel and it's amazing !!

[crumbsole]

Hi, thaks for sharing, really interesting. And direct. I was trying to implement this system, on multiple calls to an api, its all dynamic, so in setup i instantiate two asyncdata, with inmediate false, the a computed reacts to the status of one of them and when first data arrived another computed loops this data executing the second api call, THE PROBLEM is the key its not dynamic, i tried too many ways and always the key fixed at setup time, and never recalcs . ¿Any idea ? Maybe its a wrong initial pattern, and must use fetch directly

[jTiKey]

Too bad it doesn't seem to work with the watcher 😢

[easynegocio]

Thank you very much for the videos; the content is truly excellent. I am new to Nuxt and am just beginning to explore server-side rendering frameworks. Do you have any videos explaining where the rendering process takes place, specifically when it occurs on the server versus on the client, and most importantly, how to control it?