1. What are React Server Components?

React Server Components (RSC) are React components that are fetched and rendered on the server whereas client (regular) components are fetched and rendered on the client

2. How do React Server Components (RSC) work?

How do react server components work?
    • First the client sends a get request to the server
    • on the Server React begins to render React Server Components to JSON and stream them to the framework
    • the framework turns the JSON chunks into HTML
    • and streams it to the client
    • which renders the initial HTML page
    • sends a request for JS
    • and renders the incoming HTML chunks
    • when the JS arrives, the client boots up the app
    • in order to hydrate it
    • important to note is that the React Layer is separate from the Framework/Network layer

3. What are the Pros and Cons of React Server Components (RSC)?


Pros:

  • direct access to data sources from anywhere in the tree
  • cheap hydration
  • automatic code-splitting at client component imports
  • use heavy code modules (libraries) on the server and send only the rendered result to the client
  • React components for the server
  • React Server Components instead of APIs

Cons:

  • new (and currently complex) paradigm to learn
  • currently only available to some frameworks
  • still have to load and rebuild React on the client
  • new and undiscovered pitfalls to avoid

4. When should you use React Server Components (RSC)?

  • when you have components with data fetching
  • when you don't have event handlers or useState
  • when you want to use third-party libraries on the server without increasing the bundle size sent to the client
  • when you want direct access to the backend from React

Perfect for most React apps, except static sites

✳️
see also Progressive Hydration, Islands Architecture and Resumability

Resources

Start here:

React Labs: What We’ve Been Working On – March 2023 – React
The library for web and native user interfaces
React Server Components
Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle
rfcs/text/0188-server-components.md at main · reactjs/rfcs
RFCs for changes to React. Contribute to reactjs/rfcs development by creating an account on GitHub.
Data Fetching with React Server Components
For comments, please find the RFC link in the blog post: https://reactjs.org/server-components 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero bundle size React Server Components. The demo is available now whether you want to pl…

In Depth

How React server components work: an in-depth guide
A deep dive exploration of React server components under the hood.

Docs

Building Your Application: Rendering
Learn the differences between Next.js rendering environments, strategies, and runtimes.
Getting Started: React Essentials
An overview of essential React features for building Next.js Applications, including Server Components.

More

The future of React with Dan Abramov & Joe Savona (JS Party #267)
Dan Abramov & Joe Savona from the React Team join Jerod & Nick for a wide-ranging discussion about React’s place in the frontend ecosystem. We cover everything from React competing with React, their responses to SPA fatigue and recent criticisms, to Server Components and the future o…
Zero-Bundle-Size React Server Components | Hacker News
Netlify Edge Functions: Serverless Compute Powered by Deno
Build fast, personalized web experiences with Netlify Edge Functions: a serverless runtime built for on Deno, and compatible with your favorite JavaScript frameworks.