DejaVue #E034 - Data Fetching in Vue and Nuxt

Video Description

▶ ONE MORE TIME - 15% discount for the VueConf Toronto DEJAVUE https://dejavue.fm/vue-toronto-2024 * 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! --- Your Hosts * Michael Thiessen * Twitter - https://bsky.app/profile/michaelthiessen.bsky.social * YouTube - @michaelnthiessen * Web - https://michaelnthiessen.com/ * Alexander Lichter * YouTube - @TheAlexLichter * Bsky - https://bsky.app/profile/thealexlichter.com * Web - https://www.lichter.io/ -- Chaptermarks: 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 ▶ ofetch https://github.com/unjs/ofetch ▶ ky https://github.com/sindresorhus/ky/ ▶ Suspense in Vue https://vuejs.org/guide/built-ins/suspense.html#suspense ▶ Data Loaders https://uvr.esm.is/data-loaders/ ▶ DejaVue #E030 - Pinia and Data Loaders (with Eduardo San Martin Morote) https://share.transistor.fm/s/9769f2f6 ▶ nuxt-workers https://github.com/danielroe/nuxt-workers ▶ Partytown https://partytown.builder.io/ ▶ squoosh.app https://squoosh.app/ ▶ DejaVue #E001 - The Need for SSR https://share.transistor.fm/s/90ce0fd6 ▶ You are using useFetch wrong https://www.youtube.com/watch?v=njsGVmcWviY ▶ DejaVue #E003 - Nitro: The Next Generation Server Toolkit https://share.transistor.fm/s/d7130ed5 ▶ Caching in Nitro https://www.youtube.com/watch?v=KN5e2Hh6uC0 ▶ Client side caching with getCachedData https://www.youtube.com/watch?v=aQPR0xn-MMk ▶ Composable Caching Utils issue https://github.com/nuxt/nuxt/issues/24271 ▶ Route Rules in Nuxt https://www.youtube.com/watch?v=Fp04Kw4nBE8 ▶ DejaVue #E002 - Building a Nuxt.js SaaS in less than a week (with Harlan Wilton) https://share.transistor.fm/s/75ebfa28 -- Follow DejaVue on ▶ The Web: https://dejavue.fm/ ▶ Bsky: https://bsky.app/profile/dejavue.fm ▶ Apple Podcast: https://podcasts.apple.com/us/podcast/dejavue/id1737631788 ▶ YouTube: https://www.youtube.com/@DejaVueFm ▶ Spotify: https://open.spotify.com/show/5VQ15QHkC7HSmwTYR7vCPF ▶ Deezer: https://www.deezer.com/show/1000792252 ▶ Amazon Music: https://music.amazon.com/podcasts/798ccbb2-4a8f-4d83-bff7-00cbc8730f56 ▶ Pocket Casts: https://pca.st/49qr8d1k -- 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.