Introduction to Next.js Fetching Notes with getServerSideProps

[00:00:00]
>> Now we get to the fun part. And we get to fetch some of our notes into our app and get it going. So the first thing we wanna do is, let's just seed our database. Because for the sake of brevity, we're actually only gonna focus on pulling in the content.

[00:00:13] We're not gonna create a UI right now to create some notes and update some notes and things like that. We're just gonna pull the notes down. So let's just seed our database with some notes. So you can head over to that data data file. And I'm gonna go there, and I'm just going to seed some notes like that little hack that i always do to like fill an array with some stuff.

[00:00:33] So if you never use it before, new array, you put a number that's going to create an amount of entries in an array. You do a dot fill whatever you put in fill is gonna, because right now if you just do new array, it'll be 15 on defines.

[00:00:45] They'll say undefined 15 times do a dot fill, that's gonna change them all to one. So now I have an array of one 15 times and then i'm going to map over that to change them all to an object. Basically, so it's just like a quick way to fill an array with some stuff, something I've always said.

[00:01:01] I think there's a quicker way to do it. But this is how i always just do it. Cool. So yeah, we got the database seeded with some notes here. And then now, what we're gonna do is we're going to create. We're gonna figure out what we need to do to get this data.

[00:01:18] So let's think about getting all the notes from the page. So, how could we get this? Can we get it client side? Absolutely. We can do client side but that's not specific to next, we're doing next to s here. First off client side. Like that without entertaining other ideas, so that means we really get server side props or we have get static props.

[00:01:40] So I decided to get server side props on getting all the notes. And that's because I really want you all to observe how that works at runtime for server side rendering, so you can really understand what's happening. And so we're just gonna do a getServerSideProps, you could do getStaticProps here.

[00:01:57] But the thing is this was a real application and we were actually taking notes and doing notes like that. I don't have any notes you're gonna have and I don't wanna refresh the whole database at bill time and stick all the notes on there, I don't wanna do that.

[00:02:10] Maybe I do, maybe I don't, but for this application, I don't. I don't think the data is fit for that, so i'm just gonna get it every time when you request it. That's what I'm gonna do. You got to make that decision, that business decision. But at the same time next has some really good techniques cooked inside of it that really helped with a lot of stuff.

[00:02:32] Like even getServerSideProps and server side rendered pages are cached. Even they are pre rendered. So, it still works pretty well, even though they don't recommend doing it that well, and I don't. I don't recommend using getServiceSideProps all the time. But even then they kind of save you with some of that caching.

[00:02:48] So, enough talk, let's get some data. So, I'm just gonna copy that fetch right there. And then, I'm gonna go into our index right here. I'm going to export a function or an async function for getServerSideProps like that. And then what I'm going to do is I'm going to fetch our data.

[00:03:14] So fetch in this case can't take a relative path. So you might be tempted to like, well, I'm already on my API, I should just be able to do that. You'll get an error saying you can't take relative paths inside of fetch, right? Has to be a full path and so then, I don't know if you've connected the dots yet.

[00:03:31] It's like, well, how would we, if we were to deploy this then like, obviously, this isn't gonna work. This is kinda gross. So how do we get a URL? I mean, there's a lot of ways to get the URL. I mean, you get the headers here, you could probably inspect it and get the URL if you want.

[00:03:43] Or you can be explicit and just use environment variables, right? So we have the next config, put an environment variable in here for your URLs for staging production local host, and use them here. Pretty simple. So that's what I recommend, but we'll just hard code for now. So we'll get fetch, if you've ever used fetch before, you have to call jsn on it, because this is literally one of our fetch.

[00:04:03] Then we'll get the data here. And now it'll be await, res.json, like that. So we get the data and then on the API i always return a data property,so I'm just gonna destructure that so I don't have to say data.data, which is gross. And then what I'm gonna do is I'm just gonna log this note right quick.

[00:04:26] Like that, and then I was going to return some props that has notes on it like that. Because this should be all the notes because I'm doing a get request to API/note, which is all the notes, right? So let's do that. And then we can see here we need to wait, I'm on the wrong page.

[00:04:48] Sorry. Wait, this is the wrong page. Let me go to note index. There we go. Or notes index. There we go. Well, so put that back in there. So now that we have the notes, you can see I already have these marked-out notes that I have on the client.

[00:05:06] So I'm just gonna erase that because I put those on the server side now. And then now I can use the props that I'm passing in, which is gonna be notes. I can use those right there, which are the same name, so I can do that. And this should work exactly the same.

[00:05:21] All right, so let's test it, let's go back. Let's go here. Go to notes. It looks like something messed, yeah, I don't have any notes. I gotta restart this. Let's see, okay. I'll see okay, looks like I'm still getting back a janky response here. Let's see, did i do my notes data thing wrong.

[00:05:53] Notes notes. Don't look like it, let's see. See what that looks like. That looks good to me. I still gotta check off stuff in there, okay? I'm like, wait, that definitely works. There we go. Sorry about that. Okay, boom, there we go. So let me get some notes on the page which looks very similar to what we already have before, so boom.

[00:06:41] Got some notes, all that data's coming down, we can see the log here is logging on the server, right? So I'm logging those notes. They log on a server. Now we can check the actual client here and you can notice they don't log on the client. As it goes, that code doesn't run on the client.

[00:06:59] It only runs on the server. And I really wanna emphasize that point. This good service side props only runs on the server. So, if I can get to it again, there we go. There we go, yeah. This only runs on the service, so good to go there.