In this episode, we dive into the concept of deferred fetching in Nuxt, which is when you only fetch data after a route has loaded, instead of blocking the route until your data comes in (like with the default behavior of useAsyncData
or useFetch
).
We start by seeing the standard approach: when you load a route (like a to-dos page), the whole page waits for data to finish before it appears. This is usually super fast with small or local data, but can be noticeably slow over a bad connection — which we simulate using network throttling.
Next, we switch on deferred fetching by passing a defer: true
option. This changes things: the page loads right away, and the data comes in afterwards. You get the chance to show loading indicators so users can see something while waiting. We walk through how to add a simple loading indicator for when the data is still on its way.
We also discuss where deferred fetching makes a difference — like on dashboards with multiple slow data requests. Deferring each one means the whole interface doesn’t get stuck waiting for everything at once.
Finally, we cover a few edge cases, like what happens if a user lands directly on the to-dos page (hint: server-side rendering still lets the data show right away, which is also good for SEO!), and we wrap up with a practical demo.
By the end of this video, you'll know how and when to use deferred fetching in your Nuxt apps, and how to hook up user-friendly loading states to go with it.