listen I okay this is man I I I've never been introduced like that thank you thank you thank you brother that was that was tremendous I look this this conference is is extremely special to me because I live here Berlin I I call it home I've lived here for eight years and it's an absolute honor and privilege to be able to be here and talk to you today in in my home City uh this year I've spoken at somewhere upwards of 30 conferences all around the world but in Berlin this is number number two and it's it's it's extremely special to me to see all of you here from from Belgium from the Netherlands all these places coming here um not just to to watch me but but to celebrate react together right and that is a special thing so I just want to really quick give it up for you for coming uh for get Nation amazing incredible.

uh I don't I feel like I I have an intro slide um but apparently I don't need it thanks to Nathaniel um my name is t pronounced like contagious I'm not don't worry um and over the years I've I've I've worked in Tech now for many many years 20 plus I I lost count um and over the years i' I've had the privilege of working with and at a number of various teams that I'm I'm really thankful for um and really it comes out of of that that I want to share these things with you today okay um I today I'm a consultant I help developer focused companies do devel um and if you need help with that I'm happy to chat after but that's not what we're here to talk about today today we're here to talk about react server components.

uh we're going to talk about it in some depth we have 20 minutes so we'll see how far we get the last time I gave this talk it was 45 minutes even though it was in a 20 minutes lot and and then the git Nation folks were like never again in fact it was the last talk and it went over time so now they're like we'll give you the first DOC so you can't go over time anyway um how many of you are using react server components uh okay that's I'd say 1% if that of the room which is fine I mean it's it's new and that's that's why I'm here um what I want to talk to you about is the mechanism of react server component so I'm not going to talk to you about um how to use it the the prevalent way of how to use it is to actually just use nextjs um or a framework that handles the complexity for you

um I think this is relatively straightforward you can find it Tobias from is here he'll probably talk to you about it Etc what I want to teach you is the mechanism how they work because I have a problem accepting highlevel blackbox abstraction as an engineer anyone am I alone in this anyone else yeah okay most people um and so if you tell me just use nextjs and it's it's it's figured out for you I'm like okay that's awesome thank you nextjs team but like how does it work so I understand the underlying mechanism okay and so that's what we're here to talk about today um in in our time together we will not cover two things we're not going to cover the basics of react I assume you know this um and if if you don't we can chat separately but I have 20 minutes here and we will not cover server actions because at the time of giving the talk a lot of the react specific stuff with server actions is in Canary meaning it's pre-release it's not production ready

um you can use server actions in versel in nextjs excuse me um but again I'm not ready to talk about that in a in a react capacity what we will talk about is server components from the theory side we'll look at the problems they solve and then we look at how you can Implement server component rendering is in practice we look at the boundaries between server components client components what they mean and how they fit together okay with that I have 15 minutes left wow with that um let's get started talking about server components actually let's zoom out a little bit and talk about react um I I recently had the privilege of writing a book on react and so I'm thinking like first principle style react by its name is a piece of software that enables web applications to what to react to user interact that's the whole point and you might think okay so I click a button and react does stuff exactly but it's not just about reacting it's about reacting well it's about reacting fast it's about when some expensive CPU work is happening right you're rendering a big list and then a user enters a a keystroke in an input that input needs to respond to them before whatever CPU work is happening it needs to react instantly that is the purpose of react through and through uh and so typically web applications are CPU bound meaning they're doing work on the CPU or they're Network bound meaning there's data fetching and and the data fetching can sometimes interrupt user interfaces can you think of a case where this is this happens Spinners in fact X formerly Twitter is entire entirely client side rendered and so if you go on there you'll see like seven different Spinners all at the same time and this can interrupt your user experience and so react aims to solve that problem and server components is and are the answer to this now you might be thinking okay but serers side rendering was the answer to this right serers side rendering means you render all your react components on the server side and then you just send like HTM or you stream textt HTML to your browser okay um yes they solve the spinner problem but the the level of granularity isn't ideal typically before nextjs 13 you would render an entire page on the server you couldn't say like this specific card that formats marked down this thing alone needs to render on the server and and go to the client server components solve that server components solve the problem of data fetching some of you may have heard of suspense for data fetching right server components is basically that um it started to be a problem it started with solving the problem of large JavaScript bundles right um we used to ship a lot of JavaScript a lot the entire application was basically just JavaScript we ship from some server to the browser the the browsers have to download the JavaScript par it execute it and then the app becomes interactive that's awful um server rendering solves that by sending markup and then hydrating so the JavaScript is loaded after server components Sol it even more by rendering components exclusively on the server exclusively so if you have a Blog it's read only there's no interactions you can render that entire thing on the server and almost never on the client and then what do you render on the client you only ship the interactive elements a little button a little plus sign the add to cart the small stuff and therefore you ship less code so it's a two it's a two-way solution it solves data fetching because you're even fetching on the server and it solves the the large bundle size problem so we only ship like little buttons instead of entire applications okay that's the solution so with that I'm already bored of listening to myself speak so let's just do a demo how about that um what I want to show you is this little demo I have prepared um these are jokes and and they're moving um I I promise you there's logic so let's talk about this a little bit these jokes come from a database um there's an amazing member of the react Community called shti kapor this is shti shti kapor 08 and she has a GitHub repo called Dev joke and it's full of jokes developer jokes um I needed to get this into a database so there there's a back end as a service thing called Keel um I I I loaded it in here and there's a bunch of data here questions and answers and I wanted to just basically give myself data to fetch so now I have this database and I want to fetch it to show you server components so this is the application fetching data from my database and it's what you're seeing here is entirely client rendered so if I reload this you look at some problems with client side rendering so if I reload this exactly um let's try that again there we go so it says no jokes so there's this flash of unstyled or unintelligent content it fetches the data and then the data becomes available right but that no joke was was was not cool it would be nice if I could fetch that data on the server and just send the jokes directly okay then I click on what is brown and sticky any answers um I click on this and I should see the answer but it says no answer and then a stick which a stick is brown and sticky you're welcome it's very safe for work um and then whenever I click on another joke I get the answer but you see it it like it has this like no answer flash yuck and that's because it's all client side render if I look at the network tab here you'll actually see like Network requests happening when I when I so I click this look at all these requests and if I filter on fetch it's doing this now if I do this on the server side we get instant stuff let's look at how we can add serers side rendering so this is a git diff and we're going to walk through what changed so in step one we add a server this is literally an Express server that adds serers side rendering so what we're doing is we import our dependencies we instantiate a server and we listen on dis this will get our client side JavaScript from there we have a route parameter SL page and whatever that parameter is we just require that we expect it to be a default export of something in a Pages folder right this is how nextjs works it just you you get a route parameter okay this is probably Javascript file under Pages require it show it okay that's what we're doing here and then we take that and we use render to string to turn the component into an HTML string send it over the network that's it this is like serers side rendering in a nutshell it's oversimplified because I I want we have 20 minutes okay there's a bunch of educations that that I'm not handling use a framework okay but this is about the mechanism okay so let's run this now so I'm going to go here and we'll get checkout one npm run build and then so we're building the server and we're starting the server that's all we're doing okay and now we'll go back to my browser this is Arc by the way best browser in the world chicken need hydr I don't even know um but we're now on Port 3000 not 5173 SL question and it says no jokes and it just actually has no jokes at all can someone tell me why you we have no jokes because what we're doing is we're fetching on the client side but this is server side rendered and we're not hydrating we're not adding the JavaScript after the fact in fact if you look here at the react Dev tools this page doesn't appear to be using react so a very easy solution to this would be what would be to come here um to our server excuse me server. TSX and when we render to string we send the HTML right but we also do script SRC client.js like this and then we load the client inside JavaScript in theory this should work but I don't trust the demo effect so we'll see um reload are you using react yeah you are and so now we picked up react on the client side we hydrate and it works but the problem still sucks because we're still like client side fetching you see this and and we have this because the initial load is without data and then we still fetch on the client side it would be cool if we can fetch on the server side so let's Advance a little bit in get history let's go to the next commit so we added a server but notice we changed no application code okay what is application code let's look at application code here so if we go to our Pages SL question right questions what we're doing in questions we're fetching like this yuck we're fetching a use effect and we're setting you should never do this by the way um this is the less ideal way to fetch data and react you want to fetch on the server side as early as possible that is even in module scope never in use effect okay um and we can talk more about that around if if you have questions so this is suboptimal and that's why we have this ugly like yuck no answer and then the answer comes and then the jokes will probably load in the background lame lame so we now fetch on the server side when we fetch on the server side we can do it multiple ways server components is the Premier 20203 plus way of fetching on the server side so let's look at how we do this now with server components if we do it with server components we can basically just turn this component into an async component o get rid of all actually maybe not all of it so we'll jokes equals look at a waight oh my good look wow beautiful oh and instead of set jokes here we just like return the results whatever it is we're doing right and this is it but the problem now is it's like this is async this isn't a react component cuz react components are not async you can't do this except with server components you can let's look at how so I'm going to undo all of the actually you know what I'll save it and then I'll come here and just reset my changes okay let's look at how we add server components to the mix here so here's what we're doing we updated our questions component and we turned this component into an async component that's what we did literally what I just wrote we're doing that here and we're also doing that in the answers file we literally take a component and add async to it and fetch here instead of in use effect okay on our server what changes are we doing well before we render to string we have another another function called unwrap GSX unwrap GSX is an async function that requires being awaited and keep in mind here we're on the server and on the server we can await things because servers are async okay so we await unwrap GSX and now the question what does unwrap GSX do it literally goes component by component by component by component and if a component is a function component and if that function component is async because it has a await with a data dependency it will await it turn it into a typical a regular component that's not Asing and then return it okay and the code for that is here so unwrap jsx if it's a string or number or Boolean then it's not going to be an Asing function we just return it if it's an array we await all elements in the array this is a react fragment we just await it if it's an object then if it's a react element and if it's a built-in component div span P we call unwrapped GS X on its children AKA props if it's a function component we call unwrap GSX on its props because props have children that may be async and then we await the component itself the function component we call it with its props await it and finally we recursively just unwrap everything so we just await everything in the react tree and at the end what we get is a big tree of jsx but all data dependencies have been resolved okay and then we take that return and pass it to render to string and just get a react string that's that's that's that's your basic server components render you just await a bunch of stuff on the server send it of course you don't necessarily need to synchronously send a string you can also stream a response there this is just simplified for mechanism okay that's the gist of how it works and because now you're rendering initial markup on the server you can do some really cool things for example you can take all that initial jsx that you created on the server and store it in window then what you can do is listen for navigation in the client side so this is the server bundle right and we're storing the initial render on the server if we go to the index what we can do is create soft navigation so we come here we listen for all clicks on anchor elements and instead of navigating in the browser we stop that and we call navigate and navigate fetches another jsx tree from the server and just renders it so it's soft navigation I'd love to show you the full server components flow now um by generating the HTML on the server for the next page and sending it and saying hey react on the client side just render this tree so if we get checkout checkout excuse me checkout for PM run build so this is a full server components flow based on what we just covered so if we come here and we reload uh we'll go to slash question Q There we go no no oh wow it redirected so now we've got a full server components flow where we are if we click on the joke right first of all there's no UNF there's no style of there's no flash of unloaded content but also when I click here um it navigates and the the the the sliding position is not interrupted we persist the state because we're not fundamentally navigating in the browser we're just re-rendering new jsx we fetch let's look at what happens on the server site or rather from from the network tab so once again the jokes are going to come from here and what I'll do is I've got the network inspector open and I'll fetch let's actually put this on the side I will fetch so I'll click on a joke why was six afraid of seven Fetch and it's going to load and there because notice we didn't lose State soft navigation through server components the question is what did we Fetch and if we go to answer this is what we fetched let me make this nice and big for you so you can see okay type of is re props children so we have head we have HTML head body and then in children we have a div it's basically the next page expressed as react components from the server to the client react on the client side says oh I know what this is and then we just call it reender we say let's render do your virtual Dom diffing and then do the next page without any hard navigation on this is the gist of server components you render a bunch of components on the server you await them then you pass them to a server renderer and then you ship them um and this enables soft navigation if we look at the code everything now is async so we just literally async o08 this is a server component here it's TS ignore because the typescript definitions don't know how to deal with promises returned from this but that's the gist of it so on the server side we have the unwrap GSX function that does this we've talked about this and then you take the UN the return value of the unwrap GSX function it to render to string or even render to stream it doesn't matter and that's the interplay between server components and serers side rendering okay you can also just send that straight to a client you don't need that but this is typically how it's done one final remark as we close I can't believe it's been 20 minutes as we close um is that server components sort of mess up the semantics of things because the react server components are rendered in a server components server and then pass to the serers side renderer which is a client of the server component render so the server in this case is the client is that clear if it's not clear it's not even clear to anyone but no there's one server and the serers side renderer is a client of that server but the browser is a client of the server side renderer okay this is why server components fundamentally is a bad name so are client components which by the way we didn't talk about client components and we didn't have that in the demo but a client component starts with the directive use client and this is a cue to the bundler the build system turbo pack tobas when when when the bundler sees you client as it's compiling the dependencies it says okay this thing I'm going to split that out into a separate bundle send that bundle to the browser and then load it on the client side only right so it's the server renderer will render a little hole that the browser will fill in for the interactive client elements that's how it works uh 20 minutes not enough to go as deep as we want to but I'm I'm around all day I'm happy to talk about this with you and really like solidify your understanding of react server components because I do believe in summary I have to wrap up unfortunately but I do believe that there's a lot of imposter syndrome in the space there's a lot of esoteric language where people may not have the most solid understanding of this and I'd love to demystify some of that I'd love to give you the confidence to have highquality conversations okay so get on slido get on X formerly Twitter let me know and I'm happy to answer your questions to wrap up um there's lots of content about this on YouTube um and I also recently wrote a book um on react that goes deep into this type of stuff um it's going on sale March next year don't buy it if you don't want I'm not here to make a pitch honestly it's just if you find this stuff interesting with that react Ain thank you so much for having