Ahmad Awais

NAVIGATE


SHARE


React Server Components

Ahmad AwaisAhmad Awais
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:

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?!

Helping businesses understand developers. Head of Developer Relations RapidAPI.

πŸ“Ÿ Edutainer at Node.js CLI Automation course (100 videos Β· 22 Projects) & VSCode.pro course (over 20K devs). 🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ Mars Ingenuity Helicopter code contributor πŸ† 8th GitHub Stars Award recipient 🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator.

✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

πŸ”₯ Satya Nadella Β· CEO of Microsoft, said β€” Awais is an awesome example for developers.
πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on Twitter @MrAhmadAwais

πŸ“¨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β€” pinky-promise!

πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» 118,947 Developers Already Subscribed
Comments 0
There are currently no comments.