Build a Fullstack App with Next.js, v2 Data Loading & Server Components

Transcript from the "Data Loading & Server Components" Lesson

[00:00:00]
>> As we were navigating here like for instance let's, it did it just now too but I'm gonna go to sign in and I'm gonna go back to home watch how long it takes. See that? Right, and then when we got here then this started loading. All right, let's break that down.

[00:00:20] That's very important. So if we go back to the page and home it's because where we're loading the data, we're getting the data for the projects in the actual page. So that means this return of the JSX is completely blocked until this is done. And because this is at least two seconds, we won't even see the page.

[00:00:47] The transition won't even happen because this JSX isn't ready, right? So that's why that long pause was there first, and then when we got to the page, it started rendering their JSX and it saw this, the suspense. So then that loaded up, and then that takes four seconds so that's how we got the skeleton.

[00:01:09] So you create this waterfall effect, so you actually have control over which elements you want to load first and last and what order and how you wanna load them because that's basically what just happened. So I thought that was pretty cool. You kind of get control over that.

[00:01:25] But if you block a page with an async await before the JSX, like if you put data there, that page will not render until this is done. But if you move that data fetching down to the component level, the page will render. And this will load in when it's done.

[00:01:43] That make sense? Cool. Any questions on that?
>> So this guy will play if certain projects have more tasks associated with them than other projects?
>> Yeah, it depends on how you do the query, right? So, in the case of projects, we decided to, or that would be in the back of the page, in case of the projects, we decided to just include the task with the project query itself.

[00:02:25] So it's just one query. But yeah, if you did it separately, to where you got the projects, and then you did another query to get the tasks. Yeah, you can say cool. Let's just load in the projects. And then later on, we'll load in the tasks and those will come in after the fact versus load them in together.

[00:02:41] So it's totally up to you but at the same time you also got to think of it like this. That, as long as you have proper indexes and there's a path to getting that data, you're doing this on the server side, so it's probably going to be way quicker than what you would have to do over an API.

[00:02:58] So you don't have to think about those constraints. Any constraints you would have made and your APIs to accommodate the network, you can forget about it. The only constraints you have to deal with now when getting data is whatever the source is where you're getting your data. In this case, it's a database.

[00:03:18] But maybe it is like an API like Stripe or something like that. But even then, you're not hitting it from the client. So it's still removing one layer. So you've just got to think about in this case, as it is, is there an index here? You know, how hard is it to do this?

[00:03:32] What is this operation? Versus like how much data is coming across the wire? How long is that network request? What's waiting on us? You don't really have to think about it in this one. Any other questions? Nope? Okay, how would we change it to where each one of these projects loaded individually like a skeleton like the greeting card did?

[00:04:13]
>> What do we make like a parent projects component like you were talking about earlier?
>> Okay, we can make a parent projects component and what would that component do?
>> That would that would make the data fetch and then I guess you'd use suspense in that and have it have a fall back with a.

[00:04:36]
>> You could, it would ultimately result in the same thing. It would result in all the projects coming in at the same time, because you would have did a database query for find many and you would have got them all back, right? But you can simulate it. So there's basically two ways there's like the simulated way that looks the same and then there's the one which truly each one is coming by itself.

[00:04:57] The simulated way would be I mean, we could do it now is just, we can not put in a wait here, right? That way it's not blocking. So we would just say this is a promise. This is like, get projects, something like that, right? And that and our, our apps gonna break when I do this.

[00:05:18] I'm just gonna just comment this out right click, but you're gonna see that the components are gonna load. This page is going to load immediately now. So you didn't wait. But it still went to go get the projects. I just didn't wait for it. And then when I'm ready, I can wait for it.

[00:05:37] But in the meantime, I can show a spinner right? I can show a spinner for an array of, pick an array of five things and show us a spinner or a shimmer or a skeleton for each one of those five things. And then when I'm ready, I can actually show the data by just putting a weight in front of it.

[00:06:00] So that's the simulated way, or I would say like background parallel way. The real way of like actually getting this to work, which doesn't make sense, but this is how you would do it, is one, you would have it to where the container, in this case the page, would just get all like the project IDs that it's going to show.

[00:06:19] It'll make a query like this, give me all the Project IDs, right? Or it got it from somewhere. It's got the Project IDs, and then it would loop over those product IDs and pass them to each project cart. And then each project card would take that ID and do a get data to get its own project.

[00:06:34] And in the meantime, we would show a shimmer. So that's how that would work to be one of those two ways. Yeah.
>> Could you also just get the number of projects account from the database?
>> You could do that too, you could say, just do a query and give me the account, the number of projects, make an array of that, show your shimmer, and then get them later.

[00:06:57] Yeah. So you can get pretty creative with it. So yeah, it's got to depend on what you're looking for.