
React Server Components

The React.js core team announced the RFC on React Server Components just now. Imagine React components that run only on the server and have zero impact on the client-side bundle-size. Hence zero-bundle-size.
What are React Server Components?#
React Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
I believe this will be a fantastic improvement for the overall React ecosystem, something I’ve seen happen with Next.js that I’m a big advocate of especially since I come from a PHP background.
Learning React Server Components (RSC)#
Before you think about getting started with React Server Components, you should know that the React Server Components are still in research and development. To quote the react core team:
We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so donβt feel like you have to catch up right now!
Step #1: Watch React Server Components Talk#
Start by watching this talk on React Server Components by Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian MarkbΓ₯ge.
Step #2: Clone React Server Components Demo#
Now that you’ve watched the talk, go ahead, clone this demo to play with React Server Components on your computer. Since this is where you can provide the feedback to the React Core Team β it’s definitely worth spending some time looking at the current state of server components.
This is a demo app built with Server Components, an experimental React feature. The talk above includes a walkthrough of the demo code and highlights key points of how Server Components work and what features they provide.
When will I be able to use this? Server Components are an experimental feature. Meaning they are not ready for adoption. For now, we recommend experimenting w Server Components via this demo app. Use this in your own projects at your own risk.
Step #3: Read React Server Components RFC#
Now that you have watched the React Server Components talk and played around with the server-components demo β head over to the React.js RFCs repo to read the proposed introduction to Server Components for React. There’s also an FAQ section at the end. You may also check out a related RFC to provide feedback about the naming conventions.
From the React Server Components RFC#
I’m quoting a portion of the RFC to give you a deeper technical understanding of the Server Components concepts. Since it’s an experimental feature I definitely recommend watching the video and reading the RFC.
This RFC discusses an upcoming feature for React called Server Components. Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering:
- Server Components run only on the server and have zero impact on bundle-size. Their code is never downloaded to clients, helping to reduce bundle sizes and improve startup time.
- Server Components can access server-side data sources, such as databases, file systems, or (micro)services.
- Server Components seamlessly integrate with Client Components β ie traditional React components. Server Components can load data on the server and pass it as props to Client Components, allowing the client to handle rendering the interactive parts of a page.
- Server Components can dynamically choose which Client Components to render, allowing clients to download just the minimal amount of code necessary to render a page.
- Server Components preserve client state when reloaded. This means that client state, focus, and even ongoing animations arenβt disrupted or reset when a Server Component tree is refetched.
- Server Components are rendered progressively and incrementally stream rendered units of the UI to the client. Combined with Suspense, this allows developers to craft intentional loading states and quickly show important content while waiting for the remainder of a page to load.
- Developers can also share code between the server and client, allowing a single component to be used to render a static version of some content on the server on one route and an editable version of that content on the client in a different route.
Zero-Bundle-Size Components#
Developers constantly have to make choices about using third-party packages. Using a package to render some markdown or format a date is convenient for us as developers, but it increases code size and hurts performance for our users.
For example, today rendering our Note example with Markdown might require over 240K of JS (over 74K gzipped individually).
// NoteWithMarkdown.js
// NOTE: *before* Server Components.
import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)
function NoteWithMarkdown({text}) {
const html = sanitizeHtml(marked(text));
return (/* render */);
}
However, many parts of an application arenβt interactive and donβt need full data consistency. For example, βdetailβ pages often show information about a product, user, or other entity and donβt need to update in response to user interaction. The Note example here is a perfect example.
Server Components allow developers to render static content on the server, taking full advantage of Reactβs component-oriented model and freely using third-party packages while incurring zero impact on bundle size.
If we migrate the above example to a Server Component we can use the exact same code for our feature but avoid sending it to the client – a code savings of over 240K (uncompressed):
// NoteWithMarkdown.server.js - Server Component === zero bundle size.
import marked from 'marked'; // zero bundle size.
import sanitizeHtml from 'sanitize-html'; // zero bundle size.
function NoteWithMarkdown({text}) {
// same as before
}
What’s Next?!#
Well, this is all pretty exciting as you can see from the examples shared in the RFC quoted above. Though, it may also end up complicating the React development even further.
I am however super excited to see this through as I believe ultimately React Server Components will lead to a faster and more accessible user-experience of browsing a React.js website. That’s really great for everyone. Right?!
Developers Takeaway
Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!