Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style

Welcome to the server components to the rescue, turbo charging and empowering your React application with style.

Who I am? I am Phillipa Perez Ponce, I am software engineer and frontend lockads and volume sharing. And today I will like to speak about React server components.

Before that, almost three years ago, especially in December 21st, 2020, the React team first introduced us to the React server components. Before that, we knew the interaction between server and client. As we have the data in the server, we have the UI interactions in the client. So, we started to use client side rendering, and the client side rendering is like this. We have a server, we have a device, and we ask to the server about the page. And HTML, we ask for the bundle, and JavaScript, CSS, return the bundle. And we saw the bundle, we do all the things, and we ask the data. And return the data. And finish in render the page.

This look like our first paint, our page interactives. It's okay. Our full content, full paint. It's not so good. It's a little really expensive. Our metrics are not good. Our users don't have a good experience. They suffer. We suffer. Our paint increase. So we try different tools, different architectures, different rendering. For what? To avoid this to try to have better metrics, to try to have better, better experience.

Better user experience. So that day, React server components bring us with an idea, free ideas. Easy to maintain, quick to build, improved metrics, improved user experience. And you can use it in your favorite rendering. And what are the benefits? Why are you using that for these free ideas only? No, we are using this because it has better advantage. As we are using the server, there is no code that you need to download to the client at the startup time.

So also you can apply a formatting in the data. You can do a format to the data, string, date. What is next? Full access to the backend. As you are using the server, you can use microservice, you can use the file system, you can use the database without cost to the start time.

Automatic spreading. This is because, previously, we used the lazy import, we used the dynamic import, and, right now, you only need to do is import Lala from Lala, and you have voila! You do automatically, and without much code. Even with less code.

Non-client server waterfall! This is because we eliminate the wrong type. So, you have this that is okay. You have the HTML. You have the bundle. Go to the bundle and go with the data. So, then, this time, is build the thing and build the page. So, you don't have this, okay, I need the bundle. I need the data. And you have all in one request.

Avoid attraction tasks. This is because server components reduce the cost of attractions. You can put all the logic, the product logic in the server, and you can have several layers of the attractions. And this only brings to the client that all these render elements for the client is ready. So the view is more look and feel and nice to have in a way that you have only that pure rendering. And the same challenge in Unified Solutions, you have the same code for solution. You have the same code for in the server, you have the same code in the client. So you don't need to have a different language for the server and for the client. You can have all in one place.

First, we spoke about our React Server components. We spoke about the benefits, and right now who is React Server components? We have client components that lives in the clients, lives in the browser. And we have the server components, which lives in the servers. This is our first part of the situation in the React Server component, our React components and client components. This is a note.

Your parent defined you. That means that using React Server components, a server component can have choice that are server components or client components. And one client component can have only client components.

We can see in the next example. We have in blue the server component. We have orange, the client components. And here we have an icon, we have a switch, we have inputs, and we have a wash.

So first, we will cover the server components. And after that, we will cover the client components. The client components, if we go to the page, we can see here that we have server component, that you can use, use server to define that. In every server component, you will see the use server. You are expressing that it is a server component. This is the way that you put and say that it's a server component. Here is a server component also and image. Image is a server component. Also, here, the switch is a use client. For server component, we use use server. For client component, we use user client. If we return to the page, input is a client also, use client. And the server component is use server. So this is a use server also.

So in that case, what is the difference between server component and client component? It's not only that you are using this use server, use client. In use servers, you can use interact with the other API, other server, other microservices, database. And for our clients, we have a user state. We have a user first maybe. And we can interact with the all interactive way that the page. We can see the events. We can see, for example, in other exercise that we have in switch, we can interact with the document. So, the main difference if you are using state, use effects, or you can interact with the browser API, you need to use the use client. You need to put that as a client component, because you are interacting with the API from the browser.

Our server components are different. Our server components are wrappers. In that case, for example, the word definition is only a parser of the information. And brings with an isolate component to the server, to the client. This is the first step. We see we have a server component that can have client components and server components. But if you have a parent that is a client component, you can have only child client components. Here is the sample. We have our switch, we have our definition, we have our input. We continue.

So, here we are in our sample. This way that we use the React server component, that we are using React server components, impacts our metrics. Here is the same code, it is the same value, it's one bundle, you have in the first content paint the same metric. In time to interrupt, you have that, is the same time, because you spend the same time to build all the components and build all the UI. And our large content painter, that was so excessive. Three seconds approximately, we do a huge decrease. One second. So much. And this is because we don't have this round treat that because we are asking for the information in the server, we parse the information and we bring the information, the UI to the client ready. This avoids the round treat, this avoids the waterfall.

We have limitation with React Server component, we have local storage because we can't use the local storage. We can't use the Bluetooth in the server component because we are in the server. We can't use the web-use CV. We can't use a stay, use a fat, use a reducer. Because we can't use several things. We can't use the browser API, we can't use the interactives. What is the future for React Server component? As it says in the post on March 2020, 2023, this functional interaction capabilities between the server and client, this is one of the things. This is one thing that includes improving the synchronization of the state between the server and the client. Sending client data to the server to execute data mutation maybe, and some improvement in formula. The other thing is allowed to the server component to do a re-render in response to the state changes. Maybe maintain the client-side interacted and allowing fluid UI update without refreshing the entire page. These are some features, and if you want to see and you feel more curious about the code, you can do an inspect in that repository, and if you have some doubts, you can contact me on Twitter.