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

Rate this content
Bookmark

Join us as we dive into the exciting world of React Server Components, an feature designed to revolutionize the way we build web applications. In this action-packed talk, we'll explore the key benefits of Server Components, such as reduced client-side code, improved performance, and streamlined development experience. Through engaging examples and live demos, you'll learn how to integrate Server Components into your React projects and harness their power to create next-level user experiences. Don't miss out on this opportunity to stay ahead of the curve and elevate your React skills!

16 min
15 Nov, 2023

Video Summary and Transcription

Welcome to the server components to the rescue, turbo charging and empowering your React application with style. React server components were introduced three years ago, providing an easy-to-maintain and quick-to-build solution with improved metrics and user experience. By using server-side rendering, there is no need to download code to the client at startup. Server components reduce the cost of attractions and provide a unified solution. The future of React server components includes improving state synchronization, allowing server components to re-render in response to state changes, and enabling fluid UI updates without page refresh.

Available in Español

1. Introduction to React Server Components

Short description:

Welcome to the server components to the rescue, turbo charging and empowering your React application with style. React server components were introduced three years ago, providing an easy-to-maintain and quick-to-build solution with improved metrics and user experience. By using server-side rendering, there is no need to download code to the client at startup.

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.

2. Introduction to React Server Components - Part 2

Short description:

So also you can apply formatting to the data. Full access to the backend. Automatic spreading with less code. Non-client server waterfall eliminates the need for separate requests. Server components reduce the cost of attractions and provide a unified solution. React Server components consist of client and server components.

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.

3. React Server Components: Server vs Client

Short description:

Your parent defined you. Using React Server components, a server component can have server or client components. A client component can only have client components. Server components are defined using 'useServer', while client components are defined using 'useClient'. Server components can interact with APIs, servers, microservices, and databases, while client components can use state, effects, and interact with browser APIs.

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.

4. React Server Components: Wrappers and Impact

Short description:

Our server components are wrappers that can have client and server components. Using React server components impacts metrics, reducing the time to build UI and improving performance. However, there are limitations, such as not being able to use local storage, Bluetooth, or browser APIs. The future of React server components includes improving state synchronization, allowing server components to re-render in response to state changes, and enabling fluid UI updates without page refresh.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.