CSR vs SSR
CSR vs SSR
Understanding the differences between Client-Side Rendering (CSR) and Server-Side Rendering (SSR) is crucial for architecting modern web applications.
1. Client-Side Rendering (CSR)
In CSR (e.g., standard Create React App or Vite), the server provides a nearly empty HTML skeleton and a large JavaScript bundle. The browser downloads the JS, executes it, and React builds the UI on the fly.
The CSR Timeline:
- User navigates to site.
- Blank HTML downloaded (White screen).
- JS Bundle downloaded (Still white screen).
- React executes and builds DOM (UI becomes visible & interactive).
Best for:
- Dashboards behind a login screen (where SEO doesn’t matter).
- Highly complex web applications (like Figma or Google Docs) where initial load time is an acceptable trade-off for complex interactivity.
2. Server-Side Rendering (SSR)
In SSR (e.g., Next.js getServerSideProps), the server executes the React components, fetches required data, and sends a fully populated HTML page to the client.
The SSR Timeline:
- User navigates to site.
- Server fetches data and builds HTML.
- HTML downloaded (UI becomes visible immediately).
- JS Bundle downloaded in background.
- React Hydrates (UI becomes interactive).
Best for:
- E-commerce sites (SEO is critical).
- Content sites and blogs.
- Pages where the initial data changes rapidly and must be up-to-date on every request.
Summary Comparison
| Feature | Client-Side Rendering (CSR) | Server-Side Rendering (SSR) |
|---|---|---|
| Initial Load Time (FCP) | Slower (Browser must download/parse JS first) | Faster (User sees HTML immediately) |
| Subsequent Navigation | Instant (Only JSON data is fetched) | Fast (Modern frameworks optimize this) |
| SEO | Poor (Crawlers see an empty div) | Excellent (Crawlers see full HTML) |
| Server Requirements | Cheap Static Hosting (S3, CDN) | Active Node.js Server required |
| Data Fetching | Happens in the browser (Network waterfall risk) | Happens on the server (Closer to DB) |
Modern Hybrids
The line between these two is blurring. Frameworks like Next.js allow you to mix strategies. You can use SSR for your marketing pages to get good SEO, and CSR for your complex internal dashboard, all within the exact same React application.
Interview Questions
Q: What is the main disadvantage of Client-Side Rendering (CSR)?
A: In CSR, the server sends a virtually empty HTML file to the browser. The user stares at a blank screen while massive JavaScript bundles download, parse, and eventually render the UI. This leads to slow perceived load times and heavily penalizes SEO since web crawlers struggle to index blank pages.