Fetching Data from an API

[00:00:00]
>> The next thing I want to do is, I want to talk about fetching data from the API. So lets take a look, so if we go to our display, base display component, this is where we are using the browser fetch API in order to get data. Now here is the thing though, that means this only works in the browser.

[00:00:21]
And one of the things that nuxt offers is the ability to do things like server side rendering, static site generation. But, this means that if it tries to run your code inside of a node environment, this is going to break. So, how do we get around this? Well, basically, there are composable here as you might have guess, that help us with this very thing.

[00:00:41]
So, the one that I'm gonna show you first is actually gonna be called useAsyncData. And so useAsyncData is something that it takes two framers. One, it takes a key of what is gonna be called. So in this particular case, we can just say that, we'll make it a dynamic key.

[00:01:00]
Because basically, if you think of it like this, nuxt is trying to perform really figure out what kind of queries there are. And so, if you don't give it a key, sometimes it identifies the same one, remembering some problems. So let's go ahead and say like this. We'll call that query, just like that.

[00:01:15]
That looks good. And then, what you get is a callback function as a second argument. And so inside of here, let me go ahead and close that off. All right. Inside of here, this is where you get access to something called $fetch. And this is like their polyfill version of like, if you're on the client side, it'll use a normal fetch.

[00:01:40]
But, if you're on the node side, it also then switches over to basically, the node fetch, or whatever they decide underneath the hood to use. And so we save this something is off. Nope that looks, no, no, there we go. There we go. Now it's indenting correctly, okay.

[00:01:58]
So as you can see here, this now makes a pretty big difference because now we actually have the ability to actually fetch the data, whether it's on the server side, or on the client side. We go ahead and refresh. This is good. Let's go inside of my dues.

[00:02:16]
And then okay, so something's not working. What is going on? Well, it's saying response to JSON is not a function. Let's see what's dive. Let's dive a little bit down in that. So we're gonna do here is after it fetches, I need to see then. Let's log what actually comes back, so in this case we're gonna comment out this part as well.

[00:02:34]
And let's see what happens. So as you can see, What's going on? Well, the reason why response to JSON doesn't need to happen is because search basically, nuxts team knows. Every time you're fetching data back, you don't want it as a string, you want it as JSON. So let's save you that extra and JSON file it for you when you get it back.

[00:02:54]
So in other words, what we can do then is basically let's grab this line, swap it in, omit the thing, but then this is just the response. And then just like that. Now, if we refresh, there you go. Everything is working. And so the difference now is that if we go inside of our nuxt, and we run NPM run build, we'll see that we get a brand new directory that previously we didn't see, which is dot output.

[00:03:26]
And so once again, just as a reminder, this is usually because something is generating this folder. Not something for you to touch and mess around with. But this is basically what you'll usually be serving. And so as you can see here, there's a public folder in here. And there's a bunch of things that are co chunked, which is nice.

[00:03:42]
And Server index chunks. Yep. Nitro Client. Okay, so basically what it done is broken it up into a bunch of modules that makes it easier for basically performance loading purposes, as far as knowing what to load. But what I wanna do actually real quick, that I wanna see if we can make happen, is NPM run generate.

[00:04:07]
So the difference between the generate and the build commands is that, the generate command is more for basic static building. And build is the build output that you're usually deploy onto a server. And that's it actually gets served up. And so it's fine, looks like there is an error, because we're actually seeing some stuff being not found, but that's totally fine.

[00:04:25]
And we can deal with that later. But, you can see now that on the index, we have our index page, and you see that, this is like our Google Fonts stuff that we had earlier. But then, if we go into display, we go into todos and we go into index.

[00:04:40]
You'll see now that. They actually have data here as far as todos queries and things and so on. It's bundled and split it out, but you start to see, like this is one of the advantages of using their native fetch tools is because now we're getting the ability to see benefits on the server side as well as the client side.

[00:05:01]
And to be honest when it comes to what is inside, the bill, that could be an entire workshop in it of itself. So this is more of to give you a cursory glance. And so that in the future as you're starting to decide what makes the most sense for your app, and the requirements.

[00:05:15]
Then you can decide accordingly like, okay yeah, I do want it to be server side rendered, or I want it to be statically generated. And just figuring it out from there. Does that make sense? Cool. The other thing that you should know about todo, is that this whole thing, right?

[00:05:36]
Might feel a lot, but what you can do in addition is, and this is the part that's a little confusing right now as the ecosystem stabilizes, is that there's actually a useFetch composable, that actually simplifies this a lot. So basically becomes this, I believe, response. So useFetch is basically like syntactic sugar that wraps around all of that.

[00:06:10]
Cuz the useAsyncData define a key callback. $fetch is a lot of primitives to know about and to do. So useFetch is an alternative. Now, which one will become the best practice and stuff still remains to be seen? So that's something to consider as far as things to use, but the useasyncData is the key one to know about, cuz that's the core thing around how a lot of things are built.

[00:06:31]
And so from there, you'll have the chance it started, just playing around with things and figuring that out. But, I know that server-side rendering is a topic that still can be rather complex for people to deal with. Because a lot of times as front-end developers, we don't necessarily touch those sort of things.

[00:06:46]
It's mainly focusing on the client side things, but I wanted to give you a peek into what nuxt starts to provide for you as a result of that. There are obviously a lot of other things that come with it, but one of the questions that was asked in the chat earlier was around the idea of LAZY Fetch.

[00:07:00]
And so one of the things they did add is that if you prepend something with LAZY, like LAZY Fetch, for example. It'll basically prevent the page from being blocked from rendering. Because otherwise, right? Like most [INAUDIBLE] Calls, it's waiting for it to get complete the call, then renders out the entire page.

[00:07:15]
And so, the LAZY keyword throughout the nuxt library, can actually be used to stop the patron blocked entirely. So you can even do LAZY components for example two. Where, don't wait for this component to load before you show me the homepage, just show me the thing and then that's fine, blinking the component when it comes.

[00:07:34]
And so it's a little ergonomics like this that are currently being experimented with, inside of the nuxt API in order to make our lives a little bit easier. But as they're being standardized, I kinda wanna refrain from saying anything is best practice just yet. And we'll kinda see how the ecosystem grows, yeah, once that suite continues to pervade throughout the ecosystem.