React Standards in Next.js

[00:00:00]
>> Scott Moss: I wanted to talk about react and how it plays into some of the new things in next.js. I don't wanna go too deep because, a lot of it is probably gonna be covered, and some of the newer react courses that are gonna be taught by other instructors like Brian Holt, but there's a lot of crossover between what react is doing and how next.js takes that and puts their own spin on it.

[00:00:22]
I just want you all to know what is actually react and what is actually next.js. So, this is something I'll be talking about throughout the entire course, but this is just the preamble. So things like server components, you've probably heard of that first on next.js in the app directory, but server components is not something that was created by next.js, it's actually part of react.

[00:00:44]
It's a React thing, it is now included in React 18 react 19 But it's there. Next.js just took a gamble and decided to implement it early on, cuz they knew that they have close ties with the React team. They knew that that was going to be finalized, so they went ahead and adopted it early on.

[00:01:01]
And incorporated into the framework, which is where I think a lot of the heat that they got for the app directory when it first came out, people were, what's this? This is kinda crazy, but it took until React, the React team was like, no, yeah, we're doing server components, that's a thing.

[00:01:15]
Then now that's a standard, and then now it's okay, next year has to make sense 'cause it's such an easier way to do server components. Components, just like when there was static or server side rendering. Yeah, you can do service side rendering and react, but like who wants to make that framework?

[00:01:29]
I don't, so next day, I subtract that away for you. So it's kinda the same concept, but again, they didn't create server. They didn't create server side rendering, they didn't create server components. They just give you a bunch of opinions around it. And that the same thing is true for client components.

[00:01:46]
They didn't create that as well. That directive where it says use server, use client, that is a React thing., that is not a next.js thing. I know they got a lot of heat for that, why do you got to put this at the top of the file? He didn't come up with that, that's what with the reacting when.

[00:02:01]
Streaming a suspense, this was actually introduced in earlier react versions, but like, suspense, man, that's been a dream since 2015. I remember they started talking about that and like it's now fully realized, in my opinion, in such a way that you don't have to think about it and you'll see how we incorporate it.

[00:02:20]
But this basically is also something created by React, being able to show some type of component while your UI is waiting for some data to load and then have a fallback there. That's something that the React team created, next.js didn't create that. They just have a bunch of opinions around it like everything else, and they make it, in my opinion, super simple.

[00:02:43]
Streaming, also, that is something not actually created by React, but was made possible by React. Just the nature of being able to render components on the server, but basically just being able to stream down chunks of a UI at a time, without having to block a whole page, it's not something that is unique to Next.js.

[00:03:02]
It's just React has made it possible, and then they built an implementation on top of it. So, but we will be talking about some of that stuff. The cache function, that's actually something new to React 18. I think it was maybe in beta in React 18, React 19 is definitely there, but this is like a per record quest minimalization of server side actions.

[00:03:23]
We're gonna dive into this a lot if you're like, what is this guy talking about? But no reason I bring this up because I was looking all right at the other day and there was so much hate for this [LAUGH] On the next AS team. But again, React team made this, this is not the next.js's function.

[00:03:36]
It's just something the React team made, which is actually quite useful. If you ever done GraphQL on a server, this is very similar to a data loader where you are caching, things on a per-request level. So you're not doing multiple database queries for the same thing on 1 single request.

[00:03:56]
So it's actually quite useful. Transitions, transitions are basically you wanna change some state in a component, but you don't want the UI to be blocked. So if you use a U State hook that blocks the UI. So what if you wanna change some state but not block the UI?

[00:04:12]
That's what a transition is. I think next day's got a lot of heat for this because the React team didn't really finalize it, or they didn't have good use cases for it. And at the same time, server actions were really not that useful in the Next.js docs that we're talking about.

[00:04:28]
You can use this transition thing and then they try to explain how to use it. Well, now, because it's part of React in the docs and the Next.js docs, they kind of just link out to it, they're here, we're not even gonna talk about it. Click here and go read it from the React docs, cuz this is just too crazy to explain.

[00:04:42]
We will be using transitions, and we'll talk about it and how I use it, and then server form actions. This is the one where I think for most JavaScript developers, they were what, why are we doing this? Why did we go from doing a sync, a secret is functions on form submit, you know, doing it on submit handler, to now we're doing actions on the server side.

[00:05:06]
This kinda feels like PHP or Laravel or something like that. And if you ever use one of those frameworks, if you look at Next.js 13 and beyond, it feels just one of those frameworks for better or for worse. So form actions, again, that's something that is made possible by React, the framework, and not so much of Next.js.

[00:05:24]
So Next.js is just really building on some of these foundations with their own opinions. There really isn't anything new that they're introducing here other than their opinions on top of these standards.