React Flight Protocol

[00:00:00]
>> Brian Holt: We're gonna code the flight protocol by hand, which is gonna be fun. So we're gonna try and do a try catch here as well because this is gonna be prone to, it could be prone to errors. Anything that's gonna be an error in the React app would be an error here.

[00:00:15]
So we just wanna be aware of that. So, I mean, we're just gonna do the exact same thing here, essentially. The request.log.error("react-flight err", and then we're gonna put err here, and we'll just say, throw err, and then this will get caught up here, so it'll crash the thing intentionally.

[00:00:44]
All right, so in here we're gonna say reply.header. It's not actually string text or anything like that, it's a octet stream. So we have to say the Content-Type is application/octet stream, and then just be careful about white space. It's significant here, so be careful about white space. So let's go ahead and we're gonna do this with the a template string.

[00:01:22]
So return reply.send, and you'll be surprised at this. We're gonna put this all the way down here. It's really just like JSON and references. That's really all the React Flight protocol is, it's like a series of JSON that describes markup. And then essentially you can say, here's my one, and so put my one over here.

[00:01:50]
So it looks kind of react, so that you can repeat components. So you're gonna say my first thing my first reference, so the one colon is name, "App", "env", "Server", "key" :null, "owner", :null, and then null props. So empty object. So that's the first entry here. Anything that refers to one refers to this 0:D
>> Brian Holt: $1, so this one I am less certain about what the D means.

[00:02:41]
They don't document anywhere. So all this was just me messing around and breaking the app until I figured out what stuff did. I think it's basically just like dereferencing, right? So it's saying on 0, dereference number 1, which is going to be this. If dereference is a weird term for you, just basically means I have a pointer, go look at what the pointer is pointing at.

[00:03:04]
The other reason why they don't want me to teach this stuff to you is it's very prone to change. Even by the time that this gets released, this actually might not be what it is. But I was telling you that you would never write RSCs by hand, you will definitely never write flight protocol by hand.

[00:03:18]
But I wanted you to see under the hood, it's really not that interesting or that hard to do. Okay, so we're gonna say 0: here, and we're gonna say $, div, null. Again, this also looks like create element calls a little bit as well, doesn't it? Children, [ ].

[00:03:52]
>> Speaker 2: Watch out, comma instead of a colon between env and server.
>> Brian Holt: Is that what I have here? Env right there, yep, you're right. I put a comma here, it's supposed to be a colon.
>> Brian Holt: "$" here, h1, null.
>> Brian Holt: And object here, children,
>> Brian Holt: Notes App. Okay, after the bracer there, no space.

[00:04:39]
>> Brian Holt: $1, close, close, comma $1, and there's no space. I keep wanting to put spaces in there, but there's none. Again, make sure there's no indentation here. In fact, yeah, this is the same one, cuz it's all the same line. And this ends like this, or else it's gonna yell at you, and it might yell at you anyway, right?

[00:05:03]
Again, this is very prone to breaking. It's not a publicly posted protocol. They don't post anything in line of what flight protocol is. I tried to find it, and this just doesn't exist. So this, I think we should work now. So, this is my webpack server running. So I did npm run dev client, and I'm just gonna start another one here that's gonna be npm run dev server.

[00:05:31]
Let's see what I got wrong here first. So it doesn't find noframeworkdistreactclientmanif, I put two ns there. I can spell. Manifest, here we go. So if you can spell better than I can, then you're having a better time than I am. So, moment of truth, and then we'll debug some problems here.

[00:05:54]
I'm sure many, if not all, of you are having some issue. Let's see. And I didn't write Notes app anywhere. This h1 does not exist in my app, but it's showing up here, which is wild. So if we look at my network call here, and I look at the response, it's just giving back this nonsense, right?

[00:06:22]
But it's translating that into this flight protocol that I have here, the Create root knows how to interpret into this, crazy, right? It's just wild to me that this all works and doesn't fall apart instantly. If it's not working for you, again, nobody should be writing this by hand ever.

[00:06:42]
So please just go into the notes here. Pretty sure that what I've done is a crime in some jurisdictions. Copy and paste all of this. And then just making sure that you're running main.js not, I guess you would have to be. Anyway, make sure you're running main js and not server js, or maybe your Babel config might be.

[00:07:04]
>> Speaker 2: Yeah, I'll take a look.
>> Brian Holt: A miss that would be the thing I would look at here. Generally, do the client one first. Npm run dev:client, and just to bring this up here, it's just running these right here.
>> Brian Holt: Okay, and then npm run dev:server. If you run server first, it'll grab an outdated version of your manifest, which is important.

[00:07:32]
>> Speaker 2: Was that a webpack issue which I just copied your new one in? It's fine.
>> Brian Holt: Okay, just like the webpack config.
>> Speaker 2: I think I stitched it together wrong.
>> Brian Holt: Yeah, I mean, some insane person wrote this, who is me. So it's easy to get some of this stuff wrong.

[00:07:49]
And what's frustrating is it's actually the interesting part of this. The interesting part of this is the flight protocol person of this or part of this. So let's go ahead and take this a half step further. I'm not going to code this one by hand, cuz it's just so much longer.

[00:08:05]
This one, though. I'm gonna copy and paste this one, and I'm gonna put that into the server.js. I'm going to replace this one with something just longer.
>> Brian Holt: Yeah, and again, it tried to format it when I pasted it, and don't let it do that. You have to make sure that these have no indentation.

[00:08:37]
>> Brian Holt: So now if I refresh the page here, I actually get my full app now. That's wild, right? How did that happen? So again, notice this has the three, that's the three pointer, the one pointer, I don't know what happened to be honest with you. And then this is saying that this is a client component that refers to the name of this in the bundle.

[00:09:07]
And this says this is which bundle it's in, right? So it's in this like runtime chunk. And then notice down here this $L3, that's the invocation of this is a client side component that you're going to pull from somewhere else in my bundle here. So again, the details really aren't super interesting or important here, but I just wanted you to see the machinery here is not that complicated.

[00:09:36]
It's just a bit opaque. If I charged you at your job is go figure out what this actually does in diagram all that stuff, massive waste of time, but you definitely could. I'm sure you could probably even put this into ChatGPT and say, like, tell me individually what every one of these things does.

[00:09:51]
And it would probably do it just fine. It's very, very simple logic to follow. Okay, let's actually make this work now, right? Cuz we've hacked around by just literally giving the strings back, let's actually coat up the thing that actually gives back the correct thing. So get rid of all this just pure nonsense, absolute nonsense.

[00:10:11]
No one should be careful about any white space ever, delete that. And we're still gonna say the octet heather. That's correct. We're gonna say const{pipe} =renderToPipeableStream. We're gonna say react.createElement(App) or h. We called it h before we could have done that again. And we're just gonna give it this module map for it to refer to of what is where, okay?

[00:10:48]
And then we're just gonna do the fun thing here. As you just say, pipe(reply.raw). So it's essentially saying, whenever you have chunks that are available to go out to the users, we could have done this with server-side rendering as well, just send them as they come, right? Don't hold them all back at once, send them as they come.

[00:11:07]
>> Brian Holt: And that's all you need to do. In theory now, we should be able to refresh this page. And we got an error. No such table notes.
>> Brian Holt: So I think that might be my path was wrong here. But we'll try it once and see if it's easy to fix.

[00:11:32]
>> Speaker 2: Just dot, dot slash,
>> Brian Holt: Yeah, that's kind of what my thought was. So here in server component, I think. You just need to say this is ../ cuz I think I changed my paths right before I shipped this. And there you go. Okay, and now we have a server component with full of notes, and then we have a client component that actually works client-side as well.

[00:12:01]
And this is all using server components. First of all, this is kind of interesting that it shows you the server, what's happening on the server, what's happening on the client, which is pretty neat. And then if you look at these Xhrs, you can see the React Flight protocol going in and out, which is pretty cool as well.

[00:12:19]
And you can see, does this look familiar to you? It's just generating the flight protocol. That's all it's doing. And that's it. That is how you code React server components by hand. Everything else is kinda derivative from this, right? Everything I'm gonna show you is layers that Next.js gives you on top of this that makes it easier, but generally all of the principles remain the same.

[00:12:43]
>> Brian Holt: We did it. Nobody died, except that person [LAUGH].