Channel
Interviewed Person
Aurora Scharff
so I'm excited to be speaking today and present the topic of react server components so obviously react and JavaScript is ever relevant and with react server components we have a completely new way to build react apps and RC's allow us to fade the boundary between the server and the client and create Rich user interfaces with minimal client side code while still maintaining interactivity and performance so my goal
today is to introduce and motivate and provide resources about react server components but before I start let me introduce myself my name is Aurora I'm from here from Norway uh and I work as a consultant at in meta in oo and I'm a fullstack developer but I work mostly on web these days and I'm actively building with react server components in my current consultancy project so the talking points of today will be first rendering strategies then we'll get to react server components what they are how they work and the benefits and the
drawbacks and then we'll go through the nextjs app router onto best practices and patterns uh when using RC in nextjs and afterwards I'm going to show you some examples of uh react server components in a demo app and finally give my thoughts on the future of RC's so let's begin with rendering strategies you can't really have a talk about web development without mentioning them because it's a crucial prerequisite so I'm not going to mention every type of rendering strategy and history of the web here but I will pick and explain some relevant topics and this is
probably going to be familiar to a lot of you so static website rendering is the most basic rendering pattern where all the web pages are assembled beforehand and uploaded as static files to a storage bucket and it can be built with plain HTML and CSS or combined with JavaScript it's delivered exactly the way it's stored meaning nothing will change unless the code is changed and although it's quite simple and efficient it doesn't handle Dynamic data or interactive websites well and it's impractical to mainting a use case for this could be an informational uh
website for business and you can see that this is the old way of making websites and it's not used very much anymore multipage applications on the other hand can handle Dynamic data so in npas HTML and data is merged on the server per request and then sent as one package to the client so the user can open the browser and uh is served the merge merge result and the entire page reloads per request or navigation to a new page and npas can be created for example with the asp.net and C pattern
or with PHP or Ruby on Rails use cases would typically be an e-commerce app for example Amazon is an NPA so what are the pros of using npas well first all the page content can be read and indexed by search engines because it's rendered HTML allowing them to appear in search results and be optimized for it and then there is no restriction of number of pages you can add performance will be the same so that means that they have unlimited scalability and um lastly they can provide more website insights for
example Google analytics can create reports for each page they also have some cons because they can have a slower uh overall or perceived performance because they will fetch each page as a package of HTML and CSS and JavaScript from the server as it's being navigated to and since every navigation causes full uh page reload it can be hard to add realtime interactivity and they can be hard to maintain because each page needs to be maintained separately then we have the single page application or Spa which is also known
as client side rendering so in a spa uh it will T typically be a react app of create react app or vit or could be angular or View and it's been the most common way to build an application for many years and in a spa the bundle.js file includes everything needed to build the app so the entire HTML is created on the client when the user opens the browser on the apps URL and the page is actually blank until the JavaScript is downloaded parsed and executed and then
