Dive into the world of data fetching in Vue.js and Nuxt.js! Discover the experimental Suspense feature that enhances user experience while managing complex asynchronous states. Learn about various fetching strategies, including $fetch and useFetch. The conversation reveals the importance of server-side caching and optimizes performance through advanced caching techniques. Plus, explore how third-party scripts can be handled effectively. If you're a developer, this is a treasure trove of insights!
46:02
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
volunteer_activism ADVICE
Client-Side Caching Strategies
Use local and session storage to cache data that should persist across page refreshes.
Use HTTP headers for native browser caching when possible to avoid refetching unchanged data.
insights INSIGHT
Benefits of Vue Suspense
Vue's Suspense prevents rendering components until async data is ready, avoiding undefined states.
Suspense can wrap multiple components to show a unified loading state, improving perceived performance.
volunteer_activism ADVICE
Correct Use of Nuxt Composables
Use Nuxt composables like useFetch and useAsyncData only in setup or composables, not in event handlers.
Avoid calling composables in click handlers to prevent memory leaks and repeated fetches.
Get the Snipd Podcast app to discover more snips from this episode
Data fetching is a crucial part of any web application. In this episode of DejaVue, we discuss the different ways to fetch data in Vue.js and Nuxt.js, and how to cache it.
We also talk about the experimental Suspense feature in Vue.js and how it can be used to improve the user experience, as well as how to handle third-party scripts in your application.
In addition, Nuxt's data fetching options are discussed, including the $fetch method, useFetch, useAsyncData and the useNuxtData composable. Finally, we cover server-side caching in Nuxt.js, including route rules, defineCachedEventHandler, and defineCachedFunction.
Enjoy the episode!
Chapters
(00:00) - Welcome to DejaVue
(00:50) - Which topics should be covered next?
(01:56) - This episodes topic - Data Fetching
(04:13) - Two ways of client-side caching
(06:17) - What is Data Fetching actually - and which library to use?
(08:19) - Suspense in Vue.js
(14:03) - Third Party Scripts
(17:38) - Data fetching basics in Nuxt.js
(20:28) - $fetch vs useFetch
(23:27) - $fetch request deduplication on the server
Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.
DejaVue