React Server Components: The Future of React?

Late 2020 brought a preview of “React Server Components” (RSC). This is a paradigm shift. Unlike Server-Side Rendering (SSR) which merely sends HTML, RSCs allow components to run exclusively on the server, never sending their code to the client bundle.

Client vs Server Components

flowchart TB
    Server[Server] -->|Streaming JSON-like Protocol| Client[Browser]
    
    subgraph ServerSide
        DB[(Database)]
        RSC[Server Component
(Heavy Libs, Secrets)]
    end
    
    subgraph ClientSide
        RCC[Client Component
(Interactive, useState)]
    end
    
    RSC --> DB
    Server --> RCC
    
    style RSC fill:#FFF3E0
    style RCC fill:#E1F5FE

The Zero-Bundle-Size Promise

If a component uses a large library (like a Markdown parser) but only outputs HTML, that library stays on the server. The client only downloads the UI result.

// NoteComponents.server.js
import db from 'db';
import marked from 'marked'; // 30kb lib - NEVER sent to client

export default function Note({id}) {
  const note = db.notes.get(id);
  return <div>{marked(note.text)}</div>;
}

Key Takeaways

• This is still experimental (in 2020).
• It solves the “Waterfalls” of data fetching in React.
• It blurs the line between Backend and Frontend.