All right, that's the end of my talk, thank you, server components from scratch. Thank you. Yes. Yes.
Okay, wait. Wait, actually. So there's a couple things that server components can do that aren't just rendering to HTML. First off, of course, client components. You can render HTML, but you want to have some interactivity with it. And also, what I think is the secret sauce of server components, which is streaming.
So let me show you a simple example of that right here. Say we have an albums component that fetches some albums from a database, literally just calling inside of a component and saying, oh wait, and then rendering it out to a list of songs and titles. And if you wanted to render that, you know, the stream and wait for it to resolve, you can even do react suspense, maybe put a fallback, say albums, and this would render the H1 straight away and show loading until that database call is done. Really cool system that you can do with server components, but you can't do with a flat HTML pancake. We need streaming.
So for that I'm going to reach for a core library in React. React server Dom. This is something that the React team provides. It's got specific versions for each bundler. Webpack is close enough to what we're doing, believe it or not, so we're going to grab from there. And we're going to create a stream by calling stream react server dom.render to readable stream. And to return that from our server, you can actually just do a web standard response, because if you don't know, streaming is part of the platform. If you return a stream, then the receiver knows what to do with it. So now we're going to restart our server. And this time, I'm actually going to curl it to see what output we get. So if I curl our end point, we should see some code coming down the wire. First, we saw that h1 come in, hello React Summit. Then our loading spinner with a little L2 reference here. That number two is referencing what comes down the wire later, which is going to be all of our albums. So it knows to hot swap loading with list of albums.
Comments