Zero Bundle Size Server Components

Rate this content
Bookmark

Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server. The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience. In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different. We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.

17 min
24 Oct, 2022

AI Generated Video Summary

React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.

1. Introduction to React Server Components

Short description:

React Server Components is a recent feature introduced with the React team and launched with Next.js 12. Today, I will be talking about the rendering strategies, client-side rendering, and server-side rendering. Then I'll talk about the React Server Components, how it is different than server-side rendering, and how we can use them in our application. We will also see the performance benefits of using React Server Components. Finally, we'll also talk about some challenges that you might come across when you try to use React Server Components in your existing application. In client-side rendering, the server sends a blank HTML with a script tag with source bundle.js. With server-side rendering, the server sends a fully rendered HTML and the browser compares it with the generated page. One of the huge benefits of server-side rendering is improved FCP. However, you can only use server-side rendering on the first upload and the state of components is not maintained when switching routes.

React Server Components. React Server Components is a recent feature introduced with the React team and launched with Next.js 12. Today, I will be talking about the rendering strategies, which is mainly client-side rendering and server-side rendering. Then I'll talk about the React Server Components, what are React Server Components, how it is different than server-side rendering, and how we can use them in our application. We will also see the performance benefits of using React Server Components.

Then we'll do everything coding, a live coding, and see everything up and running. Finally, we'll also talk about some challenges that you might come across when you try to use React Server Components in your existing application.

A bit about myself, my name is Asima. I'm a Senior Front-End Engineer working in Amsterdam. In my free time, I like to create some Front-End videos. You can reach me out on LinkedIn, Twitter.

So finally talking about the rendering strategies, so we have client-side rendering and server-side rendering. In client-side rendering, when a user requests a website, server sends a blank HTML with a script tag with source bundle.js. Browser then downloads the JS file, React gets loaded, and a request is sent to fetch the data from server. After the data is received from the server, the content becomes visible. This approach works great for building high user-interactive websites, as you can reload the components which have been changed instead of reloading the entire page. However, the problem comes as you ship more and more code to our JS bundle. The bundle size increases and browser takes time to download the bundle, because of which we get delayed FCP. Also with client-side rendering, there are SEO problems and you're not able to run them on non-JavaScript devices.

We have another strategy, which is server-side rendering. In server-side rendering, when user requests a website, this time server sends a fully rendered HTML, but this HTML is static. So what browser does is that parallelly it also downloads the JS file, then the comparison is done between the page, which is generated by the browser, and the one which is sent from the server. This is what we call hydration. After hydration, react takes control and content becomes interactive. One of the huge benefit we get from SSR is improved FCP because browser does not have to wait for client to generate an HTML and show content to the user. Also, the issue problem is solved, but one of the problem with SSR is that you can only use server-side rendering on first upload. After that, after hydration the app behaves like a normal client-side rendered application. Now some of you might say that in Next.js, you can create multiple routes and on each route you can use server-side rendering. But what happens is that as you switch between those routes, the state of components is not maintained. This is one of the major difference between server-side rendering and React Server components.

2. Exploring React Server Components

Short description:

React Server components are rendered on the server, while some components are rendered on the client. This is different from server-side rendering, where all components are converted into raw HTML and sent to the client. React Server components can be used alongside server-side rendering.

So talking about React Server components, as the name suggests, React Server components are rendered on the server. Now the end goal for browser is to generate a DOM tree. So if you're using client-side rendering, all the components in a React DOM tree are rendered on the server. If you use client-side rendering, all the components are rendered on the client. If you use server-side rendering, all the components are rendered on the server. However, with React Server components, some of the components are rendered on the server, and some of the components are rendered on the client. And when I say the components rendered on the server, it does not mean server-side rendering. Because in server-side rendering, what happens is that all the components, whether it's a server component or a client component, everything gets converted into a raw HTML and sent to the client. In fact, React Server components can be used along with server-side rendering.

3. Rendering Components on the Server

Short description:

When a user requests a page, server-side rendering can be used for the initial request, sending an HTML response. Subsequent requests can be made by the client for server components, which are sent as a JSX-like object. Rendering components on the server allows for quick access to server resources, faster data fetching, and improved security.

So what you can do is that when user requests a page, for the first time you can use server-side rendering. And this time server will send a HTML. And the next time, as you switch between the route, the client can request server component, and this time server will send a JSX-like object, which looks something like this.

So now if you look at this clearly, so the response we are getting is some of the client files and some of the server files. So now if you pay attention to the client file, what is sent from the server is only the file reference and the chunks are empty. However, with the server file, it's already sent, rendered from the server.

Now why would you want to render components on the server? So one of the benefit is that if the component is already on the server, it can access the DB and file system directly, which means that it can access the server resources very quickly, which means that data fetching becomes really fast than using a fetch call from the client. Also server is good in making computations. So you can get faster computations and also for the security purposes, you can choose to keep the sensitive data on the server instead of sending on the client. So the main idea behind RSC is to let server do what it can do the best before handing over things to the browser.

4. Server Components and Email Application

Short description:

Server components allow for fast data fetching and performance. They can be used alongside client-side rendering to optimize interactivity. Server components are not included in the client bundle, resulting in a smaller bundle size. They provide direct access to the database and file system. React server components are still in the experimental stage and are only supported in Next.js. There are rules to follow when using server components, such as saving files with specific extensions and passing serialized props to client components. Server components cannot use hooks or event handlers. Configuration steps are required to get started with server components. In this part, we will create an email application with an email list and email body components.

So what server is good at is data fetching fast performance. So you can choose to do all the performance related stuff, heavy rendering on the server and leave client for the interactivity part. All the code that we do inside the server component is not sent to the client bundle, which is a huge performance benefit because it adds zero KB to the bundle size. And also we get direct access to DB and the file system with server components.

Now what is sent from the server is rendered server component and the client place holders. So when tree shaking happens, only the server components are refetched, which means that the state of client components is maintained. Now all of you must be feeling like what is happening, but we will see everything in the coding. Right now the server components are still in experimental state and it's only supported in Next.js. So if you want to try them out, you need to use Next.js. There is a framework created by Hydrogen, by Shopify, which is Hydrogen. It uses the React server components and feel free to check out the documentation, it's really interesting how they have used server components.

Now there are a couple of rules we need to follow when we need to use React server components. I will just read them out. So firstly, you need to save the files with extension.server.js and client.js because this tells React that which components are to be rendered on the server and which components are to be rendered on the client. So our components can only pass serialized props to the client components, which means you cannot pass functions. Client components cannot import server components and server components cannot use hooks like uState or any event handlers. You also need to have some configurations to get them started. So you need to install nextcanary react-rc and react-dom-rc. Also in your next.config.js, you need to turn on the flags server components too.

Now let's create a server component. So what we are going to create today is an email application. It has a list of emails, and as you click on any of the email card, it should open the email body. So in our application there are two main components. One is the email list and another one is the email body. So first let's write the email list component. So first I will do is fetch the emails. Now I will go through the emails and for each email, I will display name, subject, description, and date. Now here, instead of passing the raw date, I will import a function and pass the formatted date. Now the email list component look something like this. What I'm going to do now is that break this component into two components.

5. Server Component Structure

Short description:

One component is the container component used for fetching data, and the other is the view component for everything related to the view. The server file is rendered on the server and the client file is rendered on the client. Functions cannot be passed to the client component.

So one is the container component, which will be used for fetching data, and the another one is view component, which will have everything related to the view. So now I've broken this component into two components. Now I will rename the files with.server and.client.js, because I want the server file to be rendered on the server and client file to be rendered on the client. Now I'm going to import email list, view component into my server component. Now, one thing to note here is that in the props, you can only add those props, which can be serialized over the network, which means that you cannot pass any functions to the client component. So this is how what my server file looks like, and since it's rendered on the server, so instead of fetch, we can also read it from the DB or read it from the file system directly.

6. Resources, Application Overview, and Challenges

Short description:

For more resources, check out Dan Abramov's blog on zero bundle-sized server components. Explore the Next.js documentation and live app. Our application features email cards and maintains state when switching routes. Challenges include importing server components in client components, using hooks in server components, and making third-party API calls.

For more resources, you can check out the blog by Dan Abramov introducing zero bundle-sized server components. You can also refer to the Next.js documentation and explore the live app created by Next.js. Now let's see what we have built so far. Our application consists of email cards, and when you click on a card, it opens the email body. The response sent to the client includes the client files and a fully-rendered server file in a JSX-like object format. One important thing to note is that the state is maintained when switching routes, which is not possible without React server components. Now, let's discuss some challenges that may arise when using server components. First, client components cannot import server components directly. Instead, composition can be used to include server components as children. Second, hooks cannot be used inside server components, so it's important to divide components into client and server components to handle states properly. Lastly, making third-party API calls inside server components requires rendering the data on the server and passing it to the component using getStaticProps in Next.js. Next.js is a suitable framework for React server components as it provides configurations for rendering, routing, and bundling.

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 Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn