React Server Components Elevating Speed, Interactivity, and User Experience - Aurora Scharff

Thank you, Frana. Yet another reason to stop using new states. I feel like we're all being bullied for our bad practices. All right, so I don't know about you, but I I have kind of a lovehate relationship with React major updates because I'm a kid and I have shiny object syndrome. And so every time I'm like, "Oh, yay, new stuff." And then I remember that I get paid to maintain

uh UI libraries and I'm like, h I got to make this compatible. And then my bad faith hits and I've been struggling with those new features, hooks, uh SSR, RSC for days and I'm like, do people even need this? Do I really have to do that? And I just realized I haven't been reading the docs. But fortunately today we do not have to read the docs. We have an expert with us who's going to tell us about

React server components. Uh I don't know if she's around. Aurora, you're just here. All right. Please come here and come teach us about React server components. Please give it up for Aurora. [Music] Oh yeah, there's something [Music]

about Oh yeah, there's something about you. Beautiful. Okay. Right. So, first of all, thank you uh React Paris for having me back for another year. Uh that's really exciting. And today I'll still be teaching server components, but this time how to elevate speed, interactivity, and user experience. Um, one sec, let me get this working. So, my name is Aurora. I'm from Norway and I work as a consultant at

Crayon Consulting in Oslo and I'm actively building with a Next.js app router in my current consultancy project. So, that's where I get my inspiration from. Um, so with React 19, which was finally released last December, we now get server components. So, how many of you have heard of server components? Good. What about how do you feel about or do you feel comfortable using them entirely? Right. So, that's very understandable because with server components, the way we build apps has

changed and server components are components that only run uh on the server or in the build and never on the client. and they differ from serverside rendering because they are never hydrated. So that means that the resulting app is partially hydrated and it means that we cannot use our familiar state effects or browser APIs inside them and this can feel very restricting at first. Server components however are extremely powerful and they can do a lot of things. So for example they can be

asynchronous and fetch their own data asynchronously right inside the component itself. Furthermore, since they're only run on the server, they can access backend resources directly and in proximity to the resource, for example, a database. And lastly, since the JavaScript is never shipped to the client, it um that means that we can reduce the bundle size and let us build more performant apps. So, here's an example of a very simple server component. It's called project info. It can be async and it can

query the database through an OM like Prisma and have the data available and the component fully rendered before it's sent to the client. Furthermore, server components allow us to fetch and render on the server and then stream in the fully rendered components to the client as they complete while displaying a loading fallback with suspense. And this is beneficial because we are sharing the compute load between the server and the client. And we can display static content and even hydrate other components on the client while streaming. So that's pretty