Server Components: The Epic Tale of Rendering UX

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more

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 place

2. What are server components and what benefits did they bring like 0 javascript bundle size

3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what

4. My take on how rendering UI will change with this approach

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

React Server Components improve performance by enabling zero bundle size for server-rendered components, automatic code splitting, and faster server-client interaction. This approach reduces the amount of JavaScript shipped to the client, speeds up initial page loads, and efficiently utilizes server resources.

Client-side rendering processes the JavaScript, HTML, and CSS entirely in the browser, which can slow initial page loads but speeds up interaction once loaded. Server-side rendering generates the final HTML on the server, improving initial load times and SEO at the potential cost of higher server load and slower subsequent page interactions.

No, React Server Components do not support handling states or effects, which are typically managed by client components. Server components are better suited for tasks like data fetching and displaying static content without interactivity.

To use React Server Components, developers can indicate server-rendered components using a .server.js extension or configure them within a framework like Next.js, which treats files in the app directory as server components by default. This setup allows for seamless integration of server components into existing React applications.

The main limitations of React Server Components include their inability to handle client-specific functionalities like states and effects, and the requirement for components' props to be serializable over the network. Additionally, as of the last update, they are still in an experimental phase, which might not be suitable for all production environments.

React Server Components are a new feature introduced by the React team that combines the advantages of both client-side and server-side rendering. They allow developers to specify which components of their application should be rendered on the server and which on the client, optimizing performance and reducing bundle sizes to potentially zero for server-rendered components.

Nikhil Sharma
Nikhil Sharma
26 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

1. Introduction to Server Components

Short description:

Today, I'll be talking about one of the very coolest things that React has been working on, which is server components. We'll be diving into different concepts, but I will be explaining the things in a little more fun way. Let's just have only one agenda in our current talk, which is just a short story, and let's try to uncover things based on the short story itself. Before diving in, a little bit about me. I am Nikhil, and I work as a software engineer here at Postman. I usually work on super fun stuff like design systems and the overall foundation of user experience that we have set up here in the product. I love to talk about everything that the web is doing and it's heading to in general. So if you're like a geek like me, I would love to connect on Twitter, on GitHub. You can find all these handles which I'll definitely share with you all.

Hey, everyone. Today, I'll be talking about one of the very coolest things that React has been working on, which is server components. We'll be diving into different concepts, but I will be explaining the things in a little more fun way. Without any further things, let's try to see what we are planning to cover in this talk.

You might be thinking, maybe what's this guy going to tell us? What are server components? How they work? Blah, blah, blah. They can be a thousand number of things. I would just say, for this talk, because I want to keep the theme of the talk as simplicity. Let's just have only one agenda in our current talk, which is just a short story, and let's try to uncover things based on the short story itself.

All right. So, before diving in, a little bit about me. I am Nikhil, and I work as a software engineer here at Postman. I usually work on super fun stuff like design systems and the overall foundation of user experience that we have set up here in the product, so I work on the bits and pieces of all of these things. Yeah, other than that, I love to talk about everything that the web is doing and it's heading to in general. So I love to talk about performance. I love to talk about how the front end is going and what new is coming up. So, yeah, if you want to, if you're like a geek, like a kind of a geek like me, so I would love to connect on Twitter, on GitHub. You can find all these handles which I'll definitely share with you all. So, yeah, I would really love to connect with you all.

Read also

2. Introduction to Client Side Rendering

Short description:

Bob is a person who is at a beach and like accidentally, he does not have anything to create a sand castle on a beach. He loves building sand castles. The responsibility of building the sand castle is like probably only on to Bob. This is how client side rendering right now works. You will have a server and you will have someone like a client that is going to request the server to do something. In this case, like as a Bob wants to build a sandcastle, maybe, you know, a client wants to build a web page. So he requests this from the server. The server is going to give it a response, which is, you know, a list, like a JavaScript files is going to give it HTML files and CSS. And it's the client's responsibility, like, you know, Bob is, it was Bob's responsibility that he has all the sand and what is the disposal and he has to figure out how to build a sandcastle. So this is what the browser does as well. The browser creates the final website basically. And like when everything is ready, this is what you see on your page, right?

So okay, so now let's get to the fun part. Now let's start a story with a guy named Bob. Now, Bob is a person who is at a beach and like accidentally, he does not have anything to create a sand castle on a beach. He loves building sand castles. But like what he has to do is he has to see, okay, there is sand and I just need to use my hands, like how we used to do in childhood, right? So we need to, like he just needs to build this sort of thing with just some hands.

So the responsibility of building the sand castle is like probably only on to Bob. He has to figure that thing out. He does not have anything to help him out. Now, with this starting gist of the story, this is what you would, if you relate to it, you would see, this is how client side rendering right now works, right? You will have a server and you will have someone like a client that is going to request the server to do something. In this case, like as a Bob wants to build a sandcastle, maybe, you know, a client wants to build a web page. So he requests this from the server. The server is going to give it a response, which is, you know, a list, like a JavaScript files is going to give it HTML files and CSS. And it's the client's responsibility, like, you know, Bob is, it was Bob's responsibility that he has all the sand and what is the disposal and he has to figure out how to build a sandcastle. So this is what the browser does as well. The browser creates the final website basically. And like when everything is ready, this is what you see on your page, right? So like pretty much simple.

3. Server-side Rendering and Client-side Rendering

Short description:

Now Bob remembers, oh, I don't have anything, so let me take some help. Bob takes helps from his sister, Sarah. Sarah is well-equipped and passionate about building sand castles. This is what SSR is, where you tell the server to build the website for you. The server creates the final HTML output on the server itself, and you get that HTML output on the client. Server-side rendering provides a bare minimum for users to see, and when JavaScript is available, the application becomes ready for users to interact with. In this talk, we will focus on the advantages and disadvantages of client-side rendering and server-side rendering. Client-side rendering has better subsequent page loads, while server-side rendering is better for initial page load and provides content faster. Client-side rendering does a good job after the initial page load work is done.

Now let's get to the next step of the story. Now the next step would be now Bob remembers, oh, I don't have anything, so let me take some help. So Bob takes helps from his sister, Sarah. Now, Sarah has like, Sarah is also very passionate about building sand castles at beach and like she's like very well equipped. She has like, like these good sets of tools, like you know, a shovel, like, like a basket and like she can do things like very, very quickly and easily. So Bob takes her help. And there's now like Bob just gives everything as a responsibility to Sarah. And he says, like, yeah, build the castle for me and like I'll just use it. And now if you understand the analogy, this is now what SSR is, right. So SSR or server side rendering is where you tell the server that I don't want to do stuff myself rather, please help me build the website for me. Right. So now how it will differ in the in, in terms of the timeline is now whenever I'm requesting the server for a website or like a webpage. The server is not giving me the resources like HTML and CSS. What it's doing is like it's creating the final HTML output on the server in itself. And I get that HTML output on the client. Now when I get that HTML output, I use like, like now then like now I see like something on the page. For example, like, if there is something that does not have JavaScript, but there are some, you know, very static content like some about sections of a page which do not usually have interactivity with them. So this is like a bare minimum that I can give my users on the face so that like they are like not staring at a blank screen. And when the JavaScript is available, like when the client now request for the JavaScript seeing the HTML, now I can hydrate my application and it actually becomes like totally ready for users to interact with as well. So this is basically what server-side rendering does, right? So far so good. I think we all know all of this basics. Now what I want to divert this story towards is what we want to focus towards in this talk. Like, what are we all know like there are tons of advantages and disadvantages of every type of paradigm that we have here. Right. So let's like look at them like one by one, very quickly. So if you see like, I'm not going to tell you like some patterns of both of these techniques and like what are the pros and cons in a nutshell. So, if you see one client-side rendering has like better subsequent page loads, whereas for server-side rendering, it's better for like an initial page load, so it can give you content faster in compared to client-side rendering because like, you know, it has to prepare everything from scratch and it's end on the browser. And secondly, client-side rendering does a good job after the initial page load work is done. Right. So, if you go to like different routes and you try to see different pages, only that JavaScript is refreshed, which is actually needed.

4. Server Components and Rendering

Short description:

Server-side rendering can lead to high server-related costs, while client-side rendering is better for search engine optimization. However, client-side rendering requires rendering and creating web pages on the browser repeatedly, making it bad for SEO. On the other hand, server-side rendering is good for static pages but takes more time to render with interactivity and JavaScript. Server components, introduced by the React team, abstract both client-side and server-side rendering, providing an intermediate abstraction format. This allows for faster rendering and the flexibility to choose where to render components on the client or server.

So, like a lot of refetching is saved because you already have like majority of the stuff on your plate, but with server-side rendering, every time you like go to the page or like maybe you refresh the server-side rendered app, it has to like do all of this stuff every time again and again. So, it can lead to like high server-related costs as well.

Now, like client-side rendering applications are great for like creating PWAs while like the client-side rendering is better with search engine optimization. And the fact is really simple because it has like you're showing something on the page and the web crawlers, or the different APIs can like have access to that information so that they can show it on the websites. So, so far, like we have like these set of advantages. And if you see like disadvantages, again, like client-side rendering does not have what SSR has like initial page load. what client-side rendering is having like, like subsequent payload. You have to do like rendering stuff and creating the web pages on the browser again and again. And client-side rendering is again bad for SEO, which we already mentioned in the advantages section while SSR is, you know, good with stuff like, like things like SEO. So like with, with that in place, let's like just make all this list a little bit shorter and focus on only these two things.

So if you see one thing is good and one thing is, and the same thing is like, which the other technique is not good at, right? So in this case, one has a good initial payload, but the other one does not. It is good with subsequent payload, page loads. One is good with, you know, with static pages, for example server-side rendering, because if you have interactivity and JavaScript in that, like it's again, going to take some more amount of time to render your page on the server. Because again, JavaScript is going to take some time. But in case of client-side rendering, it's good with dynamic pages, right? Because you're like rendering everything on your end on the browser, right? So far so good. It's simple. So we know that, okay, one thing is good and one thing is not, in some other techniques as well. So like, you know, you don't get the best of both of the worlds, right?

Now, imagine another part of the story, and this can be the, you know, maybe the climax of the story. So let's say now, instead of Bob calling his sister, maybe what would be better if like, maybe Bob had access to all of these, like, you know, really, really cool tools to build the sand castle, right? Like, if you would have like access to all of them, like he could maybe choose like, you know, how to like putting it in our analogy how to basically get both of the advantages, you know, having somebody else to help bring the castle versus how we can build that stuff together. So maybe he can like merge both of these benefits and disadvantages together with only the set of tools maybe. Right. And this is basically the, you know, what server components are that the React team has introduced. Right. So, several components are like a new. So if you talk about in, you know, technical terms, so several components are React's new way of abstracting both the goodness of client side and server side rendering, which actually like instead of giving you a page or like HTML CSS or like something as an HTML kind of an output, like both these techniques do, it gives you some intermediate abstraction format that you could say, where it can help render things faster and it can help you choose what is it that you want to render things on the client, versus what you want to render things on the server in the same page, because server side rendering does not allow you to. So let's try to look at how server components is changing these things, right? So let's again, see a very simple diagram of a client and a server. Now, so like client again requests for a webpage. Sorry, server gets, now server is again doing some part of server side rendering. It's actually rendering your server components on the server. And now, instead of giving you this output, it does not give you your HTML or like server side rendering, some output that you can directly show to the browser.

5. Server Components and Automatic Code Splitting

Short description:

It gives you a special format of data for React to render components faster and merge changes back to its Virtual DOM tree. Server components are rendered on the server, reducing the bundle size on the client. This technique combines client-side and server-side strategies, allowing for flexibility in rendering. Automatic code splitting simplifies component lazy loading using React.lazy.

It gives you some, you know, a very JSON-y or like it's a very weird type of format, but it gives you a special format of data. Now, this is not for you. This is for React to figure out how it can render these components faster and like merge all of your changes that it has made on the client, merge them back to its Virtual DOM tree, right? So this is like the simplest way that you can put it.

So it renders some parts of your page which are server, like server components. It renders them on the server. It gives you some data and it finally like generates, like your, your, your client actually is going to do some rest of the stuff. It's like not that much heavy, but it can do that part much faster than client-side rendering. All right.

So talking about the pros and cons of all this stuff is what do you get basically out of this technique, out of all of this FSR. So one thing is you get zero bundle size and you are right when you're hearing that. So server components are running only on the server. So you never ship the JavaScript that we have run on the server. So all of the components, you can like maybe a thousands or hundreds of components, none of them actually get shipped to the client, which is exactly zero bundle size that also in this example you might have been seeing, Dan Avermoff had also shown in one of the talks. So this is one of the very biggest pros. It like helps you make your client's side bundle be a lot more smaller. And also as I've been saying this whole time, you get the best of both worlds, which is both client-side and server-side strategies combined in one technique. So imagine something like this. You have a tomtree. You can have something that is being rendered on the server. There is something that is being rendered on the client. We talk about the implementations, how you can do that. But you can tell React that, okay, some parts of my web application are to be server rendered. And in the same page, some of them have to be rendered on the client side. So you can give that indication now to React. So which was not there on server-side rendering, and now React will handle the rest of what parts to work on on the server and what to just skip it and let the client handle. So this is a very magical and a very powerful thing to do. All right.

Going to the next thing is automatic code splitting. Now, I personally like this because, you know, like currently you would see, we have to write a code which is something like this. You have a plain React.lazy library, and you can lazy load your components as or need them, right? So you have to like write some stuff.

6. Using Server Components

Short description:

With server components, React.lazy APIs are no longer needed as the server handles code-splitting. Server components are used for data display and fetching, while client components handle interactivity. Server components can render other server or client components, but only serializable props can be passed between them. To use server components, create a .server.js file extension to indicate the component will be rendered on the server.

So, with server components, those React.lazy APIs, they go away because they handle this for you. Now, if you see in this example, like I'll just maybe go to the previous slide and show you. So you had old photo renderer and new photo renderer, these two components, which were like client components, and you were lazily loading them. But now, since everything is being rendered on the server, so server components, like on the server, they can actually segregate all, like what all client imports do you have, which are not being used while rendering your final server component, that can compose of your client and the server. So it can actually do that code-splitting stuff for you. For example, in this case, if the feature flags like new use photo renderer is true, only new photo renderer component is going to be loaded as part of the JavaScript here and not the other one. All right.

Going to the next step is you like, if you like imagine this scenario, you have your components which were earlier on your client but now we have shifted these very React components from this client side to the server. So like since we are like very close to the server, now we can have like more faster and like direct calls with the server and the response that we can get from the database, it can much more faster I would say as compared to the usual fetch calls that we do. So it's super fast than that. All right.

There are some things that we also cannot do, which is with like, although you can use like client and server components, both like in conjunction on the on the server things like states effects, which are usually like the things of client components. Server components do not support that. So these things are something that you cannot use. They're a very good thing. If you want to imagine something, server components are usually used for displaying some data or like making some fetch calls or doing sort of data fetching. Whenever there is interactivity involved, you would go with client components. So I would like just say there is the thumb rule, data fetching or display stuff with no interactivity, server components, interactivity and like more richness, you have to go with that's how we need to segregate those two. The next thing you have to, like if you like you can have server components and you can also render either a server component inside a server component or you can render a client component inside it. But only like you can also like pass props from like server components to client component, but only the props, which are serializable over the network, because the server components are not rendering on the server. Like they're gonna, sorry, the server components are rendering on the server and the client components are not. So you have to, like, if you want to share data between them, they have to like, go through the server link. So only the serializable data, like, you know, objects and strings, numbers, things like that. They can like be easily be serialized. But things like, you know, functions, you can't, you can't use them as like, you can't like pass them as a prop. So this is one limitation. So, okay, now, yeah, now let's see how to actually use server components. Like what do you need to do to get just get started? In React like, I think many of us might have already seen the talk of like how React team had been demoing it. But like, you can use a .server.js extension to indicate as for the example that React had mentioned, how to create a server component. So this is an indication that this component is going to be rendered as a server component on the server.

7. Next.js and Creating Components

Short description:

Next.js allows you to create server components by default for everything inside the app directory. You can use the 'use client' directive to create a client component instead. This directive tells React to render the component on the client rather than the server.

Next.js does it in a different fashion. So it has like, it tells you that, okay, everything that you create inside the app directory, that's going to be a server component by default. Although you can do also like you can do some tweaks, you might be wondering like, how do I like create a client component if I want to create a server component? Like how do I like, you know, choose between the two. So you can just like one line, which is use client directive. Now this is going to help you just tell the React that, okay, this is nothing. It's not going to be rendered on the server, please render it on the client. And that's how it makes that distinction.

8. Demo and Server Components

Short description:

Let's go to the demo and see how things work. The demo is a simple API call that fetches a dev joke. Client-side rendering shows static data first and fetches the question and answer later. Server-side rendering prepares everything on the server, eliminating blank screens. Server components provide an interesting alternative. Let's open our DevTools.

All right, enough talking. Let's now actually go to the demo and like see how things are up. Now I've opened this very small demo here as a separate page. And this shows you a very simple thing. It's just an API call that I make on every reload, and it just shows you a dev joke. Like you have a question, and then like it just gives you a punch line or like an answer. Like in this case, like why do assembly level programmers need to know how to swim? Because they work below sea level. Nice one.

So this is how the basic demo is. So if you see like the disadvantages that we had been thinking about client-side and server-side rendering. So client-side is actually rendering things upfront when it gets the data. So like how you would, how you can like test it is if I refresh my app here, I would see that there is some static data that I can get as part of HTML, but since Javascript is not gonna be loaded, I might not get all of this stuff. Which is like the question and answer that I'm fetching as an API call. So if I refresh, you would see for some time, I don't get the question and answer. I just get the static content that I've hardcoded because that's how client-side rendering works, right? It is still getting data from the server and when the Javascript is there, it's gonna render things out. It's gonna build the sandcastle on up front. So that's how this happens. You guys already know how server-side rendering is gonna behave in this case, I guess, no? So now we are preparing everything on the server. We are not waiting for, we are not doing that thing on the client. So if I now refresh this page, I should not see a blank area, I should see this up front. So if I refresh, you see, oh, okay, maybe I think I'll just restart. Okay, something with the older build, I don't know. Okay, let's see if this restarts. Okay, yeah, here we are. So if I try to refresh, you'll see, I see the data, like I see everything up front, I'm not waiting for like a blank screen or like my JavaScript to run on this client or something, I'm preparing everything on the server, shipping it out. So that's how things are happening.

All right, now how server components are different with this. So now let's see some very interesting things now. Okay, so let's open our very old DevTools.

9. Understanding Server Component Rendering

Short description:

Let's open our DevTools and see what is actually being sent from the server to the React client. The server sends an intermediate communication channel to merge the rendered components onto the client, minimizing the client's work. Another example shows how client and server components can be used together. The server component does not ship anything to the client, resulting in zero bundle size. This is the power of server components, allowing customization of rendering on the client and server without repetition.

Okay, so let's open our very old DevTools. And let's see what is like basically what actually is it sending you? Like how is it actually working? Now if I refresh this page, you'd see I'm like still getting like I'm still getting kind of the like the data because it's actually preparing things for me as like a server side rendered app. Right. And if try to see what is it actually sending you. Right. Is. Let's go to the. Yeah. So this is what it's actually sending you now. It's like you know some weird set of things that it is using but it's you know an intermediate communication channel between the server and like the React on the client to tell you how to merge all of these things that are rendered on the server onto the client so that the client has to do like minimal work. So this is like what it is actually sending. Right.

Now let's also try to see and I think I have like another example to explain it. Now we talked about how client components and like how several components can be like you know used in conjunction on the server. Right. So if you see I have like a child like a like a client component as a child which I'm not rendering on the server and inside it I'm rendering a server component. Right. Now ideally like from theory point of view we may be talk that the server component it should not ship anything on the client. So I should not see anything in my job. So what webpack is compiling but I might see something on the client. But this line child component or do I need this? Let's go to sources go to webpack. Yeah. So if you see there was an app and it only has a client .psx file which is only for the clients component which was like we had added this everything on the server but react just gives this on to the browser that please render this down as a client component but you don't see any code that is ship for the server component. So there is absolutely zero bundle size you don't ship anything as part of your job set to the server component but the client component it gives you. So it's like very much customizable. Okay so this was one thing. So yeah I think I covered most of this. So yeah this is actually the power of server components. It lets you customize basically what you want to render on the client what you want to render on the server and like not doing all the stuff like again and again. So you get like again like what you are like talking about.

10. Advantages and Tradeoffs of Server Components

Short description:

Server components have advantages, but there are tradeoffs to consider. It's not recommended to use them in production apps yet, as they are still in the experimental stage. Next.js is a good starting point to try them out. Watch the React team's YouTube video and check out the official Next.js documentation and Zenstack article for more details. Feel free to explore the demo code and reach out for any issues. Postman is also hiring.

The best of both worlds is like what makes the strategy so much beautiful. Okay so with that being said. Now let's talk about some more stuff. So you might be thinking server components are so great like you can fit like basically they don't have any disadvantages now do they? Like you can like I can use them anywhere any place any time and like my websites are going to be like super performing but like everything has a downside to it though.

So like again like this strategy also has its tradeoff but like most importantly than tradeoffs that we had I think discussed like it being able to use effects or state updates or like you still need a server so like it's maybe it's again or like hamper your server related costs so like those parts are also there. But I think more importantly I would not recommend trying them out in the like trying all of these things in the production apps itself because the current status is I think React team is still like they're doing like a absolutely great job in gathering feedback and being super transparent about their findings and research but it's the same experimental stage in React and if you want to try it out NextJS like you can get started with it with NextJS and this is how I had built this demo itself So it's super easy to use, I would really love for you to give it a try.

A few like if you want to like go like full on through this thing I would really recommend watching this YouTube video from the React team where they have actually demoed you and explained the problem in like in more of details and also explain things up with a really like another very cool demo so I would really love you to try that out and again there is some cool documentation that I personally found like very useful and like it's so simple to understand things for example the official Next.js documentation and also there's a very cool article by Zenstack on to server components and like how you can actually get started with it a lot faster so I would definitely give it a recommendation here.

Okay. The code for this demo you can find it out on the slackbits url so feel free to fiddle with it try to break it do whatever you want to do with it so it's always fun to learn this way and feel free to like shout out at me whenever you see any issues any problems over like Twitter or like other channels. And one of the very last things is like these are some similar sorts of interesting problems and problem spaces that we keep on working with in Postman. So we're also hiring and if you if you folks would want to get part of this journey so feel free to reach out to the careers website and connect cool. This is mostly it that I want to discuss. I hope you folks are enjoying the amazing sets of conference like amazing sets of talks that we have in the event.

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

Simplifying Server Components
React Advanced 2023React Advanced 2023
27 min
Simplifying Server Components
Top Content
Watch video: Simplifying Server Components
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
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 🤐)
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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 Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
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.