Understanding React Server Components
A deep dive into React Server Components (RSC) and how they change the way we think about frontend architecture in Next.js.
React Server Components (RSC) represent a fundamental shift in how we build React applications. Unlike traditional client-side rendering, RSC allows components to run exclusively on the server, reducing the JavaScript bundle sent to the client.
Why Server Components Matter
The main advantage of Server Components is zero bundle size impact. Since these components never run in the browser, their code stays on the server. This means you can freely use large libraries for data fetching, markdown parsing, or even database queries without affecting your client-side bundle.
How Next.js Uses RSC
In the Next.js App Router, every component is a Server Component by default. You only opt into Client Components when you need interactivity (useState, useEffect, event handlers). This is a key architectural decision that promotes better performance out of the box.
Practical Example
Consider a blog page that fetches posts from a database. With Server Components, the data fetching happens at build time or request time on the server. The HTML is sent to the client already rendered — no loading spinners, no client-side data fetching.
Key Takeaways
- Server Components reduce bundle size significantly
- Use Client Components only when you need browser APIs or interactivity
- Data fetching in Server Components is simpler and more performant
- The mental model is: Server by default, Client when needed