The Problem With Client-Side Rendering
Traditional React applications render everything in the browser. The server sends a minimal HTML shell and a large JavaScript bundle. The browser downloads the bundle, executes it, and finally renders the content. This creates slow initial load times and poor SEO, since search crawlers see empty pages.
What Are Server Components?
React Server Components (RSC) run entirely on the server. They fetch data, render HTML, and send the result to the browser — with zero JavaScript shipped to the client for that component. Client components are used only for interactive UI elements like forms and dropdowns.
Performance Impact Switching to RSC can reduce JavaScript bundle sizes by 40–70%, directly improving Time-to-Interactive and Core Web Vitals scores.
When to Use Server vs Client Components
- Server Components: Data fetching, static content, database queries, file system access.
- Client Components: User interactions, browser APIs, state management, real-time updates.