React Server Components let developers render parts of a React user interface on the server while keeping the component’s JavaScript out of the client bundle. This means the server sends ready‑made HTML for those components and the browser only receives the interactive pieces that truly need to run client‑side.
Also called: RSC
Why it matters
Clients see the page faster because less JavaScript has to download and execute, which reduces bounce rates and improves conversion. It also lowers the amount of code that needs to be maintained on the client, cutting long‑term development costs.
How it works
When a file is marked with the .server.js (or .server.jsx) extension, React treats it as a server‑only component. During the request, the server runs ReactDOMServer to render the component to a string or stream, inserts the result into the HTML response, and sends a small placeholder for any client components. The client then hydrates only those interactive parts, leaving the server‑rendered markup untouched.
The mistake people make
A common error is trying to use browser‑only APIs such as window or document inside a React Server Component. Because the code runs on the server, those references are undefined, causing runtime errors that break the page render and force a fallback to the client bundle, negating the performance benefit.
