React Server Components: Elevating speed, interactivity, and user experience (Aurora Scharff)

um hi everyone my name is Aurora I'm a web developer from Norway and I work as a consultant at ineta in Oslo and I'm actively building with the next's app in my current consultancy project so I'm so excited to be here and be speaking about um elevating speed interactivity and user experience with react server components so with the release of react server components the way build apps has

changed server components are components that only run in on the server or in the build and never on the client and this means that we cannot use our familiar State effects and browser apis or hooks inside them and this can feel very restricting at first server components however are extremely powerful and they can do a lot of things uh excuse me uh yes they can do a lot of things for example they can fetch

data asynchronously um and be async and fet data synchronously 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 uh for example a database and lastly the JavaScript is never shipped to the client which means that they reduce the bundle size and let us build more performant apps 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 which is pretty incredible but there are a lot of new development patterns to understand especially related to handling data and creating good user experiences and both nextjs and react have plenty of new tools to help us with this change and relearning is hard but these new features unlock a lot of capabilities

so let's explore this by heading over to a demo uh okay let's see okay good you can see the demo so um this is a project task manager demo application and uh the designer of my current project Eileen Dell she's very talented she designed the UI and it's actually inspired by something we made in this project um and the setup here is of course an xjs app router I'm using

Prisma as my orm and an Azure SQL database because it's free on my company account and ta win for CSS and let's begin by just looking at what we have here um oh that's blue that's nice excuse me okay I don't know what that's blue that's okay so um uh here we can see a project information and we can navigate through these tabs I will was hoping you could see the URL here I'm

not sure okay there we go now it's not blue anymore um and we can also do a search like cicd is it running yes um and this is now all server components which means that there is no js on the client for any of these components and it's all just HTML and links in a form and this is a good base case because it can run really well on device that has a lower processing power

because it does not need JavaScript to run and let me also look at the Lighthouse score for this uh by the way I forgot to refresh this but you'll notice it has a very slow initial load here and that's because I slow down the data fetches on purpose for the sake of the demo and that's reflect reflected in the lighthouse score so the first contentful paint and the largest content content F paint come in after 3.1 seconds and as well the speed index is the same because