Everybody is talking about RSC these days so I thought I'd make a brief introduction explaining what react server components are.

Server components

They don’t need client side state and interactions. Essentially the server uses data to generate the relevant HTML and returns it to the browser. Inside the server components you can use interactive client components. The server components HTML may be generated from data already on the server. For example, from an API call to your database.

Client components

These are interactive JSX components (I.e. clicking on buttons and interacting with the state data). Basically HTML created at runtime in the browser from JavaScript.

What RSC does?

RSC incrementally streams the content of the web app from server to the browser. When the user loads the website, the browser sends a request to the server, the server fetches data from the backend and whatever data it gets it starts to paint the browser window with it. What I mean by this is that unlike SSR, RSC does not wait till we get all the data from the backend, it renders parts of the page such as the NavBar, Footer or some text, this streaming is achieved by serialising the react component into JSON data on server side and then reconstructing it the browser.
The server components also have automatic bundle splitting meaning that you would not require dynamic imports and if a page does not use a component it will not be sent to it.

Problems and how RSC solves them

There are many problems that RSC solves but two of them are important and worth knowing.

1) Waterfalls in fetching data
Waterfalls occur when data takes a long time to load, slowing down your applications. There can be many potential areas for waterfalls to occur, but one of the most common ones is on requests from the client to the server (and the server sending its response to the client). This back and forth communication between the server and client can cause significant latency and noticeably slow down your app, particularly if you have sequential requests coming from parent and child components. React server components solves this problem by fetching data on the server, eliminating that latency.

2) Large bundle sizes
When the browser is downloading huge amounts data in large web apps especially in SSR apps, it can take a while to load the page, especially over slower connections. React server components help solve this problem by sending only required code to the browser.

Resources to learn more about RSCs

• Here's a demo code link from the react team:

  reactjs / server-components-demo

  Demo app of React Server Components.

  React Server Components Demo

  • What is this?
  • When will I be able to use this?
  • Should I use this demo for benchmarks?
  • Setup
  • DB Setup
    • Step 1. Create the Database
    • Step 2. Connect to the Database
    • Step 3. Run the seed script
  • Notes about this app
    • Interesting things to try
  • Built by (A-Z)
  • Code of Conduct
  • License

  What is this?

  This is a demo app built with Server Components, an experimental React feature. We strongly recommend watching our talk introducing Server Components before exploring this demo. The talk 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 and are not ready for adoption. For now, we recommend experimenting with Server Components via this demo app. Use this in your projects at your own…

  
  

  View on GitHub

  
  
• Data fetching with RSC