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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.