Below is a deep‑dive article that unpacks Server‑Side Rendering (SSR) and React Server Components (RSC). It starts with a concise overview, then drills into history, architecture, performance characteristics, developer‑experience trade‑offs, migration playbooks, and FAQs. Feel free to expand any section into a chapter‑length post.
1. The Two “Server” Ideas at a Glance
React’s Server‑Side Rendering prerenders an entire route to HTML on the server, then hydrates it in the browser—trading server CPU for faster first paint and better SEO.
React Server Components, by contrast, keep individual components on the server; they stream a lightweight Flight payload that stitches server‑rendered fragments into an otherwise client‑side tree without shipping those components’ JavaScript.
Because scope and output differ—HTML page vs. per‑component Flight stream—SSR and RSC can be used separately or in tandem.
2. Where We Came From: A Short History
2.1 Classic CSR → Early SSR
Before 2016 most React apps were pure client bundles; the first paint waited for JS download and execution. Early Next.js (≤ v12) popularised full‑page SSR with getServerSideProps, improving TTFB but still shipping the same JS twice (server + client).
2.2 The 2020 “Flight” Demo
The React core team previewed “Flight”, a streaming protocol to serialise component trees without HTML, planting the seed for RSC.
2.3 2023‑2025 Maturation
By 2025, Next.js 14 and Remix embraced RSC with segment‑level streaming and edge support, while frameworks added hybrid strategies (SSG, ISR, edge SSR).
3. Rendering Anatomy in React
| Layer | Runs | Ships to Browser? | Primary Goal |
|---|---|---|---|
| Client‑Side Rendering (CSR) | Browser | Full JS bundle | Rich interactivity |
| Server‑Side Rendering (SSR) | Node/Edge | HTML + hydrated JS | Faster first paint, SEO |
| Static Generation (SSG/ISR) | Build/Edge | Pre‑baked HTML | CDN scalability |
| React Server Components (RSC) | Node/Edge | Flight payload (metadata) | Zero‑JS server logic |
Streaming SSR can send HTML chunks as soon as they’re ready, shortening Largest Contentful Paint.
[SSR diagram] - View image in original article
4. React Server Components in Depth
4.1 What Makes Them “Components”
RSCs are first‑class React components annotated with the "use server" directive (or placed in a /server folder). They can import Node‑only libraries, make blocking DB calls, and run async/await directly without waterfalls.
4.2 The Flight Payload
Instead of HTML, the server streams a binary‑friendly text protocol nicknamed Flight—think JSON plus symbols—that instructs the client runtime how to inflate placeholders.
4.3 No Client Bundle = Slimmer JS
Because RSCs never reach the browser, bundle size drops dramatically; only interactive client components are hydrated.
4.4 Data‑Fetching Colocation
Each RSC fetches its own data, eliminating the old “load everything in getServerSideProps then prop‑drill” pattern.
Continue Reading
This is a preview of the full article. To see all images, diagrams, and the complete content:
Read the full article on make-it.run
Originally published at make-it.run
Top comments (0)