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

Founder & CEO at Langbase.com Β· Ex VP DevRel Rapid Β· Google Developers Advisory Board (gDAB) founding member. πŸ§‘β€πŸ’» AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board member San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ NASA Mars Ingenuity Helicopter mission code contributor πŸ† 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. πŸ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos Β· 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

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

✨ As quoted by: Satya Nadella Β· CEO of Microsoft β€” 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

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!

✨ 172,438 Developers Already Subscribed
Comments 0
There are currently no comments.