Build a Fullstack Music App with Next.js Load Artists Data

Transcript from the "Load Artists Data" Lesson

[00:00:00]
>> Cool, so now we will, let's see what else do we have on this gradient layout, what else. Yeah, we have to actually add the part where the child gets rendered cuz right now it doesn't get rendered anywhere. But that's easy, all we have to do is outside of this flexbox, right underneath it is just render a box with some padding.

[00:00:21] Why so that'll be padding top and bottom here. We'll set some padding here. So I don't know, 50 pixels, let's be generous. And we'll add the children to be rendered here. And that's it, now we have a very flexible gradient layout that looks the same across all pages and can render whatever it wants as a child component.

[00:00:45] So if we head back into pages index, we can actually start working on the index page. So if we go look now, we should see homepage being rendered somewhere. It's right there, you just can't see it cuz the text is gray, but it's right there. So we have that, yeah, so now what we wanna do is go back to our design and let's see what we actually wanna do on this homepage.

[00:01:10] So let's see we have top artists this month. So we could render all the artists here. So if you're thinking, the database that we have, how we can make an API call, what are some of the things that we would have to do to put the artists on this page?

[00:01:26] Cuz right now we don't have any of the resources for that. We got to make some stuff. So what do you think we need to make as far as like back end to get the artists on the page there? Yes.
>> Make a hook to be able to retrieve those.

[00:01:39]
>> Yeah, make a hook so the client side can retrieve the artists. That's good, what's another one?
>> In terms of the back end what we need?
>> Yeah, if we ever retrieving on a client side, that means the client side needs to make an API call somewhere.

[00:01:54] So we need to make an API route to get the artists, yes Mark.
>> Get artists from the API.
>> There we go, that's right, get artists on the API. Yep, we will totally need to do that. What if I told you we didn't have to do any of that to still get the data?

[00:02:09] [LAUGH] What, what are you talking about? Yeah, so we could do that and that would totally work fine, but then, so let's walk through this. We had to do that with the play lists on the side bar because the play lists aren't part of a page. The playlists on the sidebar are always there, they are always gonna be there.

[00:02:30] And because the sidebar is not in a page component as in the sidebar is listed inside of the component's directory and not the page's directory, Next.js treats them differently, right? The pages directory, actually any page in here has the ability to do what's called server side data fetching whereas a component does not.

[00:02:51] So we had to make a client side call to get the play list for the sidebar, but for a page, we could actually get the data server side before it renders. So then you got to ask yourself, is the data on here going to be changing while the user is looking at it?

[00:03:07] If that's the case, you'd probably want to do a client side. But is the data on this page always gonna stay the same after the initial render? If that's the case, you could probably do it server side. So there's no wrong answer here. We can go any direction we want.

[00:03:22] I say let's try to do it server side and see how we like it. If it's not good for some reason, we can do client side, and we'll do the hooks and we'll make like the API route. But if we do it server side, we don't need the hooks or the API route, we don't need any of that, so it's really cool.

[00:03:37] So let's try that way. The way we're gonna do that is if we head over to the pages index where we already are, before we export, we can export a function called getServerSideProps. And it's exactly what it sounds like. It's a function that will basically server side, get props that it will inject into this homepage.

[00:04:15] So whatever props you return in this function will be injected into this homepage. And because this function is gonna be ran server side, I know it's confusing, it's written inside of a component, so you think it's gonna be ran in the browser. It's not. This function is only ever gonna be ran when someone requests this page and that's it.

[00:04:33] It's gonna be ran every time they request a page but only when they request a page on the server and not on the client. So if you were to go unobfuscate, unminimize this code and look at it in the client, it won't have getServerSideProps there, Next.js strips this out.

[00:04:48] If I import any, for instance, we're gonna import prison on here, that doesn't mean prison was gonna be a client, that's gonna get stripped out too. So any dependencies that we actually use inside to getServerSideProps also gets stripped out of the dependency graph and does not get bundled with the client.

[00:05:02] So if you're wondering, my god, I'm using Mongo on the front end, you're not, it's gonna get stripped out, all that's totally fine. And this is the power of Next.js. This is how you can do full stack stuff and it's like bleed, the edge is blurry. It's like, well, I'm actually doing some client side stuff.

[00:05:18] I just saw it, we literally just made this, it was client side, why is it freaking out? But no, you're actually doing server side stuff here. You have access to the cookie here, you have access to the JWT. You have access to that library function that we made call off that, can do things like that.

[00:05:36] So we could totally do it. But we're just gonna get the artist here. So let's import prisma from our lib prisma. And this is why I made that library prisma because we only have one instance of prisma. We would have to make the client every single time which I think every time you do that, makes a new database connection.

[00:05:53] So now we should only have one connection. And now we're just gonna get the artist, so we'll say artists = await prisma.artist.findMany. And I just wanna get all of them, just wanna get all the artists, just gonna put them here, cuz our app is not smart enough to get the top artists this month, I'm sorry.

[00:06:18] We're not building that feature today. So we're [LAUGH] just gonna get all the artists. And all we have to do now is to return in this format of return an object that has a props property on it. And whatever props we put here, that's what's gonna get injected into the homepage.

[00:06:33] So I could just say return props with artists, like that, you could put whatever you want here. This is a great place of like for instance, my other next JS course I've talked about how you can use this for a CMS, where this is where you would get data from a CMS and inject it on a page and things like that, Mark.

[00:06:51]
>> What's the difference between getStaticProps and getServerSideProps?
>> Good question, the question was what's the difference between getServerSideProps and getStaticProps. getStaticProps is another function that's also ran at a non client time except it's ran at build time whereas getServerSideProps is ran at runtime on the server. So getServerSideProps is gonna execute every single time you request this homepage, getStaticprops is only gonna execute when you do a static build of your site.

[00:07:21] So if you're doing a static website like a blog or something, you would do getStaticProps, whereas if you were doing like, I want this page to be dynamic, it changes every time, you would get getServerSideProps. So this will probably be a dynamic page because theoretically, these artists will be different depending on who's logged in.

[00:07:41] So that's why we're doing that. And we're not generating anything static right now, we wanna keep this server side. So yeah, that's the difference there. So in the getStaticProps, you wouldn't have access to a request cuz there isn't a request, this happened at build time, whereas on getServerSideProps, you would have access to a request and things like that.

[00:07:58] So yeah, okay, so we'll get server props and then now appear we should have access to artists. So we can check that out. You can see app's no longer breaking. If we didn't return anything here, it would freak out. It would be like, you see right here error serializing props returned from, yeah, props must be returned as a plain object.

[00:08:27] [SOUND] So it's you actually have to return some something here otherwise it disagrees. And if you do a log here, so we do a console log on the artist, this should show up in your terminal or whatever the result of it is, right? So let me actually refresh this.

[00:08:44] Make a call and you can see right here it does log all the artists. So here they are, we got artists. But now looking at the artists, I noticed there's no avatars on these artists, nothing here. So we could add some images for the artists, or we can just add some placeholders right now.

[00:09:01] If we add some images, we need to go back to our schema, add an avatar field, make it required, run a migration, go find some placeholder images probably, put them in there. Update our seed script to reseed the database and then we can come back and do that.

[00:09:15] Or we can just bypass all of that and just add, let's add a placeholder image here in the homepage that just does it for artists, but that would be the process for that.