Server Components in Next.js

[00:00:00]
>> Brian Holt: So, let's do some more server components. Let's write my route, so inside of app, new directory, my, and as you might guess, we need a page.js you might be wondering. Why are these like lowercase? Why are they JSX, not JS, and all or other way around? Why are they not JSX?

[00:00:26]
It's just the way the next does it. I really can't give you much better answer than that. Some people are very allergic to JSX. Is that a file extension? And what I say is I don't care. It makes so little difference to me that I just lean into whatever the code base is doing.

[00:00:43]
I do capitalize. Some people are allergic to that because Linux is case-insensitive. And then you run into weird issues because, like Windows, can be case sensitive. Again, I don't care. [LAUGH] never rely on capitalization, I think, is my core advice for you. We're gonna do something really similar to what we did before, but we're gonna do it from a next perspective.

[00:01:04]
So, we're gonna do an async database from SQLite 3. And again, this assumes you are user one, right? Cuz we're not doing any auth. Export default async function MyNotes.
>> Brian Holt: And we're gonna do an async function FetchNotes. And we already did this once, so I might have you just copy and paste those queries, cuz it's not interesting to write them again.

[00:01:37]
So const db = await, async database.open, yeah ./notes.db. I think this is run from the root of the project, so it should be okay. But we'll find out, I'm sure, when it yells at us. Const fromPromise, and we're gonna copy here in a second, and then we're gonna do the same thing, const toPromise = copy here.

[00:02:24]
>> Brian Holt: Okay, and we'll do that here in just a second, and then we're gonna do const (from, to) = await promise.all(fromPromise, to Promise. If you're not aware, this almost never makes a difference because this is happening all locally. But this will make sure that these two things happen in parallel, as opposed to if we did a weight here and a weight here would be sequential.

[00:02:52]
And since we're doing two queries, we want them to happen at the same time. That's the magic of doing like the await promise.all.
>> Brian Holt: Okay, and then we will just return from and to. Let's go copy these queries cuz ain't nobody wanna write that, right?
>> Brian Holt: I might have you copy this markup as well, just cuz it's so long.

[00:03:25]
>> Brian Holt: So, this is the from promise right there. This might even be, I think this is actually literally the exact same one that we had written before, and the two promise looks really similar. It's just changing to from the two, by the way.
>> Brian Holt: Okay, right, this should look pretty.

[00:03:48]
Let's get rid of that, let's get rid of that. Look, really similar. The real big difference here is from user to user, that's all. Now we have this function here, and we can just say const notes = await fetchNotes.
>> Brian Holt: Okay, and return. Again, this is essentially exactly what we did before, but we're gonna do twice for to and from.

[00:04:19]
So, let's again, because we've already covered this before. Let's just go ahead and grab this markup, unless you really want to write it, and then don't let me stand in the way of your dreams. Don't let your dreams be dreams. And there you go. So, my notes to you, this goes through the notes from you, and this goes through the from.

[00:04:53]
>> Brian Holt: Make sense, yeah.
>> Brian Holt: Okay, so server components on next. That's the whole thing, like you've already been through, the way worse way of writing this, so doing it the easier way seems much better. So, we're here on NotePasser. We're gonna go to my notes, and you should see essentially everything from Brian and to Brian.

[00:05:23]
Notes from you and notes to you. So, you can see here Tanner was quite rude to me. Webpack config broke again. That's actually just fair because I literally did just do that. This one as well made me laugh, your function names are longer than my patients, anyway, vs code suggested I quit.

[00:05:48]
Any questions about server components in terms of next, it should feel very similar because it's more or less the same thing, right? It's just that we didn't have to deal with all of the same problems, but let's take a look at this, because this might be helpful. Actually, I think you must have to do it this way.

[00:06:09]
Yeah, so you can see they have these like question. This is probably hard to see. Can I make this part bigger? Yeah, they had this like question make RSC equals blah, right? This is like their own kind of like way of passing stuff back and forth to the flight.

[00:06:28]
And if you look at the response here, does this look familiar to you? It's all just flight protocol again, right? Obviously, it's way more complicated, but at the end of the day, it's just shipping. Back and forth markup, just in kind of a coded way, in a more compact way, it's cool, right?

[00:06:47]
I think it's cool. Maybe I'm broken but in this particular case, I think I am right. I think it is cool.