Getting Started with Nuxt 3
This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Get started
Already a member? Sign in to continue
Playing
10. Deferred fetching

Episodes

0%
Your progress
  • Total: 1h 15m
  • Played: 0m
  • Remaining: 1h 15m
Join or sign in to track your progress

Transcript

00:00
So we've looked at fetching data using useAsyncData and useFetch. Now what we're going to do is take a look at deferred fetching, which is useful in some circumstances. And that will become clear at the end of the video.
00:12
So at the moment, let's just switch this back to use useAsyncData. We are on the to-dos page. And if we just give that a refresh, you can see that this just loads in. Now this is a really, really quick request because we're not really loading in that much data.
00:28
And the endpoint that we're loading from is very, very quick. So you can see that when we switch over, it almost immediately appears. Let's just slow this down a little bit and just see what happens. So I'm going to come over to the network tab.
00:40
And I'm going to turn on throttling here to fast 3G. So a slightly slower internet connection. I'm going to give this a refresh just to load this in. It's going to take a little while.
00:49
And once that's loaded, now when we click on to-dos, see what happens. You can see that the loading of the entire route was blocked until this data was loaded in. Let's just take a look at that again. So if we hit to-dos, you can see that this page does not load at all.
01:06
The route does not come in at all until that data is registered. Now depending on the kind of data you're fetching and how slow the request is, you might want the entire page to load before this. And you might want to use a loading indicator.
01:21
So that is where deferred fetching comes in. Let's go ahead and pass in a third option to use async data or use fetch. And let's go ahead and say defer true. By default, this is set to false.
01:34
So you'll just get a standard request and this won't defer it. So let's head back over to the browser and hit to-dos and see the difference now. So when I click on this, you can see that the route has already loaded. There was a slight delay because we're throttling.
01:49
But the route loaded, we didn't see the data and then the data loaded in. And that gives us the opportunity, like I just mentioned, to add in a loading indicator here. So imagine that you had a dashboard, for example, with five or six sections which all loaded data in.
02:05
You wouldn't want to make lots of undeferred requests because that would slow the entire loading of your dashboard down. If you had multiple of these requests, you would want to defer each one and then add a loading indicator for each part of that example dashboard.
02:22
So let's go ahead and add a loading indicator in here and then we can pretty much wrap it up. So we can do this in whichever way we want. I'm going to go ahead and wrap the entire for loop here in a template so we don't render any additional markup.
02:35
And I'm just going to add a really simple if statement to this and just say vif to-dos. So if this data is available, then we are going to go ahead and show this. And that gives us the opportunity to go ahead and either render some markup or another template and just put a v-else here.
02:50
And then we can say something like loading. So that is now showing this if the to-dos have been loaded or show this loading indicator if they haven't been loaded. Let's go over and check out the difference.
03:01
So let's just give this another refresh and let's go ahead and click on to-dos. There we go. We get our slight loading indicator there. We are still throttling this.
03:09
You could slow that down if you want to, but that's pretty much it. Now, let's just again prove this by switching defer back to false. We'll go back over to the home page and give this a refresh. And we'll cover a couple of other points before we go.
03:22
OK, so let's click on to-dos. And you can see we get the standard behavior that we saw before. The root loading is blocked until that data is available. So we're going to go ahead and switch defer back to true.
03:34
So a couple of points to address. What happens if we land directly on this page? Well, let's just give this page a direct refresh and just see the behavior that we get with defer set to true.
03:46
Kind of looks like it is having the same effect as we saw before when we had defer set to false. Now, the reason behind that is Nuxt is a server-side rendered framework by default. So if we view the page source of this, we know that we have the markup actually here available. So I'm viewing the source of this now.
04:06
And if we come over, you can see each of these to-dos listed in the actual markup. And that is great for search engine optimization. So when we land on this page directly, what it's not going to do is make like an AJAX request. It's actually going to grab this data.
04:23
That means that when a search engine is indexing this data, it will always pick up the markup. If we were loading this in via an AJAX request, search engines or whatever is crawling your site probably wouldn't pick this up. That's why we're going back to the homepage to then click on to-dos to see this data loaded.
04:42
You can see that that was already available because we've already made a request. But if we refresh the entire site again, wait for that to finish, and then we hit to-dos, you can see that we'll get that loading indicator in there. We didn't that time, but it just depends on where this data has been loaded.
04:57
So that is pretty much deferred loading. Really, really useful for things that you want to show loading indicators for, like I gave the example of the dashboard. And you just want to pass a third option just here and set defer to true instead of the default false.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!