A second and third version of this course released using Next 13+, but this course is great if you want to see another example fullstack project. We now recommend you take the Build an AI-Powered Fullstack Next.js App, v3 course.
Transcript from the "GreetingsSkeleton Component" Lesson
>> So, we're going to create a greeting skeleton or I think someone had a better word for this. What was the word?
>> Shimmer? There it is, the greeting shimmer. This one's not going to shimmer though, it's not going to have that, whatever, the shimmer. It's not going to have the shimmer but actually, no, I think it will.
[00:00:19] I think this one does have a shimmer. We'll find out. I can't remember if I did the shimmer or not. I think I might have. Yeah. I do animate pulse. It's definitely going to shimmer. Okay, so let's create a greeting skeleton TSX in our components folder. And there's no logic here, this is all styling, it's basically just HTML but I'll walk through it if you want to see how shimmer works with Tailwind.
[00:00:47] It's quite interesting but nothing special here. Basically what we're doing here is we're just creating empty divs with spacings and backgrounds that look like the shape of the element that it's trying to imitate. That's it. It's not really doing anything else. So, we have our greeting skeleton. We exported it.
[00:01:24] And now what we want to do is we want to bring that into our page and pass that as a fallback to suspense. Which is wrapped around the greetings component that we already brought in. So let's do that. Let's go back to our dashboard homepage. We're going to wrap the greeting in the suspense component.
[00:01:51] We're going to give it a fallback of greeting skeleton like that. Okay? So, then if we go back here and refresh, we get that skeleton instead while it's loading, and then boom, then we get our actual component. I'm gonna try to make that component for width because it is actually bothered me, it should be full width.
[00:02:24] It's because its parent isn't. That's interesting. It's just CSS stuff. Yeah, okay, I figured. Where's this? This thing is this one, this one should have a, no, it does. Has a one of one, that's 100% total, I don't know.
>> That would be slash full. Yeah, that's always about to add, but I don't know why one of one wouldn't have done the same thing.
[00:03:43] The data happened on the server, the data fetching happened. So, that's one thing to remember. And then two, we don't have to set up the conditional logic on is there a loading, you basically have to make a hook to see if it's loading or not and then at that point you're on the client.
[00:04:22] Next.js, whatever they add to it is cacheable and predictable, it never changes. Your code is the only thing that changes, so that's why it's hard to cache but all this happened on the server, pretty cool.