Data Fetching in Vue and Nuxt
Listen now
Description
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 (24:43) - Caching in Nuxt.js (28:18) - routeRules of server-side caching (29:38) - defineCachedEventHandler / defineCachedFunction (32:19) - Unstorage for storing the cached files (35:41) - useNuxtData (40:26) - Why does Nuxt offer more data fetching options? (45:32) - Wrapping up Links and Resources LAST CHANCE 15% discount for the VueConf Toronto* with code DEJAVUE ofetchkySuspense in VueData LoadersDejaVue #E030 - Pinia and Data Loaders (with Eduardo San Martin Morote)nuxt-workersPartytownsquoosh.appDejaVue #E001 - The Need for SSRYou are using useFetch wrongDejaVue #E003 - Nitro: The Next Generation Server ToolkitCaching in NitroClient side caching with getCachedDataComposable Caching Utils issueRoute Rules in NuxtDejaVue #E002 - Building a Nuxt.js SaaS in less than a week (with Harlan Wilton)Your HostsAlexander Lichter BlueSkyTwitterYouTubeTwitchWebsite Michael Thiessen TwitterYouTubeWebsite 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.
More Episodes
Published 11/15/24
Alex is accompanied by the wonderful CJ Reynolds in this episode of DejaVue. The Senior Creator at Syntax.fm brings not only Vue experience but also a history of Angular JS and React, as well as various other technologies. The two content creators talk about how CJ became a senior creator at the...
Published 11/08/24
In this episode of DejaVue, Michael is joined by special guest Simone Cuomo. Together, they discuss how to "get started" with Vue and also topics around general developer culture, such as in-office vs. remote work and the power of mentorship. Simone also shares learnings and insights from the...
Published 10/31/24