Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

13. Client-side fetching

Transcript

00:00

When we make a request like this using useAsyncData or useFetch, the request is always made on the server side with Nuxt.

00:08

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.

00:25

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.

00:41

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.

01:02

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.

01:17

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.

01:44

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.

02:04

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.

02:21

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.

02:33

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.

02:54

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.

Episode summary

In this episode, we dive into the differences between server-side and client-side data fetching in Nuxt. We start by showing how useFetch and useAsyncData make their requests on the server side by default, which is great for SEO and fast initial page loads. You'll notice that when you refresh the page, there's no XHR (AJAX) request in the browser’s network tab because the data comes straight from the server.

But what if you actually want to make a traditional AJAX request in the browser, like you would in a classic client-side app? We walk through how to set the server option to false when using useFetch, which tells Nuxt to fetch data on the client side instead. Now, you’ll see the XHR request in your network tab, and this can be handy for things like navigation counts or data that doesn’t need to be indexed by search engines.

We also cover some gotchas—like what happens when you try to access data that isn’t there yet, and how to use conditional rendering (v-if) to handle these loading states. Plus, we show why using await may not make sense for client-side fetches in some places.

By the end of this video, you’ll know how and when to choose between server- and client-side data fetching in Nuxt, and how to tweak your components to handle both approaches smoothly.

Episode discussion

No comments, yet. Be the first!