And within the mounted hook, so we'll say onMounted, we can fetch the data within here. So let's say fetch, or you can make use of any HTTP library like Axios as well, and we'll grab the endpoint in a second. And since we're using fetch, we have to convert the response to JSON, so response.json, and then we can assign our data. So the data coming back, we will make use of our piece of state. So it's a ref, so we have to do users.value equals data coming back, okay. So let's grab the endpoint here, I'm going to make use of JSONPlaceholder. And there should be an endpoint for users here. Here it is, we have 10 users coming back.

And there should be an endpoint for users here. Here it is, we have 10 users coming back. So let's copy this link. And let's put it here. Okay, now let's make use of it in our template. So we'll make a new section here. And let's just make an unordered list here. And we'll loop over the list items. So we'll say v-for equals user in users. And there should be a key on the user.

So we'll say $v4 equals $user in $users. And there should be a key on the $user. So we'll use that as a key, $user->id. And we'll just display their name. So it should be $user->name. Okay. Does this work? And there is our list of $users coming back from our endpoint. Now this is totally fine in a lot of cases. If you don't need server-side rendering, then go ahead and make use of this approach.

Now this is totally fine in a lot of cases. If you don't need server-side rendering, then go ahead and make use of this approach. So again, this is being rendered on the client. So if you take a look at the source of the page, so for example, if we copy this and view the page source, this is the HTML rendered coming back from the server. And if we search for that name, we won't find it because the data fetching happens on the client. So if we need data fetching to happen on the server, we have a few options here. So back to the docs, we can make use of useAsyncData. So it's a built-in composable we can make use of.

So back to the docs, we can make use of useAsyncData. So it's a built-in composable we can make use of. And like I said, this fetches our data on the server. And after that's done, it merges the data on the client. So let's take a look at how we can use this. There should be an example down here. So let's grab this example here. And let's do the same thing. So back to our code. We'll leave this.

So back to our code. We'll leave this. And let's make another section here for our new data that's being rendered on the server. So let me just add that now. And we no longer need to create a piece of state here. We can just do it directly within the call. So again, we'll leave this. And we'll paste it in here. So let me grab the endpoint and replace this. Okay.

So let me grab the endpoint and replace this. Okay. And you can see we're making use of async await here. And we're making use of this useAsyncData composable. So the first argument is a key. And if you take a look at the docs, you'll see that the key is a unique key to ensure that data is not duplicated. So in this case, let's name it users, or users2. And let's rename this data coming back as users2, users2. And now we can make use of it the same way we did in here.

And let's rename this data coming back as users2, users2. And now we can make use of it the same way we did in here. So let me just grab this whole thing actually. And let's just change it to users2. And let's see if this works. So back to our app here. And now we have a new set. But since we're making use of useAsyncData, all of this data here is being rendered on the server. So again, let me grab this.

And there it is. So now you can see that this data is being rendered on the server. So for example, if you were building a blog and you wanted your posts to be highly SEO optimized, then I would prefer fetching data on the server instead. Now if you take a look at this $fetch call here, this is actually a wrapper around a fetch library named ohmyfetch. So if you take a look at the docs here, look for ohmyfetch, you can see a link to that here. The important thing here is that it works server side, so we can make calls on the server. So yeah, that's built right into NUX3.

The important thing here is that it works server side, so we can make calls on the server. So yeah, that's built right into NUX3. Let's take a look at one more composable here available to us called useFetch. And it's just a shorthand syntax for what we just did. So it's a shorthand syntax for this. So when we make use of this composable, and we no longer have to set the key, it does this for us and we no longer have to define this $fetch. So let's take a look at how we can do this. It's much shorter, as you can see here. So let's do the same thing.

It's much shorter, as you can see here. So let's do the same thing. So let's paste this in. Let's name it users3. And let's grab the endpoint here. Okay. So again, the key is generated automatically. And so is the fetch call here. So one more time, let's duplicate this. Let's say users3 here.

So one more time, let's duplicate this. Let's say users3 here. And everything should be the same. Back here. And you can see we get that data as well. One more thing that you should take note of when fetching data is to pick only the fields you need to reduce the payload size. So in this example here, this object is being returned, but say you only needed the title and description. So it makes sense to pick only what you need.

And it would be nice if we could only pick the fields we need in each array value. So in this case, we only need name, but everything's being returned here. So yeah, hopefully they add the option for it to work within arrays as well. But for now, let's take a look at how it works with objects. So first, we have to make a new request to something that returns an object. So let's do that. Let's just duplicate this. And now let's name this user. And the endpoint is just going to be /1 to grab the first User. And let's just output that up here.

And the endpoint is just going to be /one to grab the first User. And let's just output that up here. So after this, let's just do the same thing. Actually, we don't need a V4. So let's get rid of this. It's just going to be username. Okay, let's first check if that works. So down here should be the first User's name. There it is. Okay.

There it is. Okay. And again, if you take a look at the User object here, you'll see that all of these fields are returned. So again, the idea here is to only make use of what you need. So let's add that pick option as a second program here. And say we only wanted what do we have here, let's grab the ID, name, and email. So let's define those in here, ID, name, and email. Okay. And now, if we refresh this, go back here, you'll see that those fields are or only those