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

That's because Nuxt is a server-side rendered framework. So when we refresh this page, we don't see an additional XHR request here made to that server. And when we click on this, exactly the same thing. It's still server-side loaded, but we've just deferred this data.

Now if you wanted to make a traditional AJAX request using an XHR request, you can go ahead and do that as well. Let's take a look at that now. So we can get rid of defer true, and we're going to go ahead and use the server option here. By default this is true, so this will have absolutely no effect.

But if we were to set that to false, what's actually going to happen now is this request is going to be made on the client side. So you can see it now appears under this Fetch XHR filter within the network tab. So now we're pretty much just making a traditional AJAX request to get this data back. And again, that might be preferred.

If SEO is not important and you are using a fetch to get something, then you'll want to go ahead and use this option. Again, particularly if you have slower endpoints or you have lots of different requests on the page. Let's just view the page source to prove this.

And you can see that we don't actually end up with any of that data that we saw before when we were making a request on the server. So if you want to make a traditional AJAX request with this, the best practice is to go ahead and set server to false. Just bear in mind, it won't be server side rendered, so it won't be able to be easily picked up by search engines. I'm going to go ahead and set this back to defer true in here.

And for our navigation, although this is not a great solution to grab the count about to-dos, we're actually going to use the server option here to set this to false. Because for something like the navigation, we probably don't want that server side rendered. Now at the moment we get a 500 error, cannot read property length of null.

That's pretty obvious because we are making this request after the page is loading. Nuxt on the server side is trying to look for this to-dos and it's trying to read a length from it. It doesn't exist at the moment. So to get around this, we would have to add some sort of template in here.

We could do that into the entire navigation item if you wanted to, or just the link itself. I'm going to go ahead and add that on here. So let's say vif to-dos. And when we come over, you can actually see that this is disappeared.

And the reason being is we're using an await here, which is absolutely fine if we're setting other options. But for an AJAX request, it doesn't make sense at a root level just here. So if we get rid of await, this is going to happen after the page is loaded. We don't need the await in here to wait for that data to come back in that promise.

So now that we've added our vif, if we come over now and give this a refresh, you can see we get a slight flicker where this data isn't loaded. So it's really up to you to just mix and match the options that you have available with useFetch or useAsyncData to get the data back as you need it, and then go ahead and appropriately show this in your UI.