Introduction to Next.js 13+, v2 Loading Blog Posts

Transcript from the "Loading Blog Posts" Lesson

[00:00:00]
>> So the next thing we wanna do is go to our blog, and we wanna get all of our blogs. So I wanna simulate us getting all of our blogs from some external data source, so let's fake that. So I'm gonna go to the root here, I'm gonna get a new folder, and we'll call it, my favorite folder lib and inside of lib, I'm gonna make a file called cms.ts, and this is just gonna get our cms data.

[00:00:25] But I gotta make my fake delete function right click so we can simulate that network, otherwise it's gonna be too fast, you're never going to appreciate all the loading stuff that we get for free. I want you to actually appreciate that, and we don't get that on localhost, so I want you to feel it.

[00:00:39] So we're gonna return a promise. Promise here and you know do a set timeout nothing crazy Why did you import that where you come from Do that, I don't know why all this stuff is coming up like that. My autocomplete is way too strong, way too aggressive. Okay, so we got that.

[00:01:10] That works. It's just freaking out cuz I'm not using it. And then now we'll say, gets all posts. So we write all posts here. This is gonna be async, and we're gonna await a delay, I see our messages is really slow, takes three seconds. We are gonna wait three seconds.

[00:01:32] And then why are you freaking out? Okay. And then we're just gonna return some fake data here. So I'm just gonna say new array. Let's just have like 10 blog posts. It's gotta fill it with some nothing. And I can say map, don't want that. I can use that.

[00:01:55] And then I'll just return an object here that just has like a title. And a title will be, this is post that's, and then like a slug which will be this is post that. Let me interprete that, there we go. And yeah, it'll have a body somewhere, but we didn't get there yet.

[00:02:28] So here we go and just export this. Now we have our getAllPosts from our CMS, ready to go. Okay, now what we gotta do is bring this in here. So we'll say, getAllPosts, bam, and then it exports, default, function, excuse me, a sync function. Got to get used to that now, blog and then we'll say post equals a weight.

[00:03:05] Get that is not what I imported, getAllPosts, there we go. GetAllPosts, there we go, we've got got our posts here. Now we can return some jsx. And we'll just loop over posts.map. Got our posts. Look at each one of these, we got a little post so we'll say h1 post.title.

[00:03:37] And actually, we probably just wrap this whole thing in a link tag so we can click the whole thing. I hate when you're looking click on the word of an element, not the element itself. It's really annoying. So do that. An href post.slug, so it'd be /blog/post.slug, Just like that.

[00:04:02] And then once I return, I'll just do an implicit return here There we go. What do you want? I don't feel like doing that. Okay, so we got our blogs. Those things are ready to go. And let's try to render this. Let's see what happens. So if we save this, and you go to our blog no, it's waiting.

[00:04:29] And then it went. So you see it waited three seconds, right? It's so annoying. I didn't know that was waiting. There was no indicator, right? So, how do we fix that?
>> Loading?
>> Exactly. We add a loading. So where though?
>> You could probably do it the blog directory.

[00:04:53]
>> Yes, that's exactly where I would do it because that's where this page lives. It has to be a sibling to the page because you can only have one page in a directory. So if you want the loading state, the loading page it has to be a sibling to the page that you're waiting to load.

[00:05:06] Because we're waiting for the blog page load the loading has to go here. So we'll say loading.tsx and it will say, export, default, function, BlogLoader. And it's gonna say loading. Okay, we're going for that HN vibe. There we go, it's loading. Beautiful. God, I love it. Let's just yeah, actually, we'll just keep it like that.

[00:05:40] We really want it to look like we know what we're doing here. There we go. Okay, cool. We got our blog post. Everything looks good, it's in order. Now we just need to be able to click on these posts. So let's see what happens if I click on this.

[00:05:54] What is that? The default export is not a React Component. That's because we haven't made a component yet. So we need to go in here and give it a component. So let's do that. exports default function, BlogPost, turn a div posts. There we go. So we have our BlogPosts, this is close to zero.

[00:06:18] It works but we don't want that, we wanna leverage that and make sure we're on the same page. So we can do a git static pass if we wanted to get those ahead of time. Honestly, it's probably fine because we are returning back like a finite set were we doing on our lib.

[00:06:35] There we go. We're returning a finite set here, so it's fine. So we don't need to do a get static params because I already know what I'm getting here and I'm totally fine with it be in service rendered. But in production, you probably would because you want those to be static.

[00:06:49] And then you would just re-validate them, which I didn't show you how to do because it's not a production thing, but you would just revalidate them. But for now, we're gonna keep it like that. Okay, so we got our post, and then we can just yeah, we'll just say post.