Build a Fullstack App with Next.js, v2 GreetingsSkeleton Component

Transcript from the "GreetingsSkeleton Component" Lesson

[00:00:00]
>> So, we're going to create a greeting skeleton or I think someone had a better word for this. What was the word?
>> Shimmer.
>> 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:06] There it is, much better. Cool, okay. Any questions on that? I mean, you could have gotten a similar result to this without server components and client components. But the thing to remember is what's actually happening in the background. There is no JavaScript here and the client need it for this component because it happened on the server and it was streamed in because it's a server component.

[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:01] So, we got all of that logic for free on when to toggle loading animation component and not without sending JavaScript to the client. Which is kind of crazy, other than the JavaScript that Next.js and React already has because suspense is part of React, so that's already cacheable. It's predictable, so it's cacheable and never changes.

[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.