Where your web page renders, on the server or in the browser, affects everything from initial load time to search engine rankings. Modern frameworks support both approaches, and the right choice depends on your application.
How Each Works
Server-Side Rendering (SSR)
- User requests a page
- Server fetches data
- Server renders HTML with data
- Server sends complete HTML to browser
- Browser displays the page immediately
- JavaScript loads and makes the page interactive (hydration)
The user sees content fast. Interactivity comes slightly later.
Client-Side Rendering (CSR)
- User requests a page
- Server sends a minimal HTML shell + JavaScript bundle
- Browser downloads and parses JavaScript
- JavaScript fetches data from APIs
- JavaScript renders the page in the browser
The user sees a blank page (or loading spinner) until JavaScript finishes.
Performance Comparison
| Metric | SSR | CSR |
|---|---|---|
| First Contentful Paint (FCP) | Fast (HTML arrives ready) | Slow (waits for JS) |
| Time to Interactive (TTI) | Moderate (hydration needed) | Varies (depends on bundle size) |
| Largest Contentful Paint (LCP) | Fast | Slow |
| Cumulative Layout Shift (CLS) | Low | Higher (content shifts as it loads) |
| Overall Core Web Vitals | Better | Worse (typically) |
Real Numbers
For a typical content page:
| Metric | SSR (Next.js) | CSR (Create React App) |
|---|---|---|
| FCP | 0.8s | 2.1s |
| LCP | 1.2s | 3.4s |
| TTI | 1.8s | 2.8s |
| Total JS sent | 85 KB | 200 KB |
| Initial HTML size | 15 KB (with content) | 1 KB (empty shell) |
SSR is 2-3x faster for first meaningful paint.
SEO Impact
| Factor | SSR | CSR |
|---|---|---|
| Google crawling | Instant (HTML is ready) | Delayed (needs JS rendering) |
| Bing/other engines | Fully supported | Inconsistent JS rendering |
| Social media previews | Work correctly | Often broken |
| Meta tag handling | Server-set per page | Requires client-side head management |
| Page indexing speed | Fast | Slower (two-pass indexing) |
| Core Web Vitals (ranking signal) | Better scores | Worse scores |
Google can render JavaScript for indexing, but it is a second pass that takes longer and is not guaranteed for all pages. SSR gives you reliable, immediate indexing.
Cost and Complexity
SSR
- Requires a Node.js server or serverless functions
- Server costs scale with traffic
- Caching is critical for performance
- Framework support: Next.js, Nuxt, SvelteKit, Remix
- Error handling is more complex (server + client errors)
CSR
- Static files served from CDN (cheap, fast)
- No server-side runtime needed
- Simpler deployment (upload files to S3/CDN)
- Framework support: Vite + React, Angular, Vue
- All logic runs in the browser
Hosting Cost
| Rendering | 10K monthly visits | 100K monthly visits | 1M monthly visits |
|---|---|---|---|
| SSR (Vercel) | Free | $20/month | $100-400/month |
| CSR (CDN) | Free | Free-$10/month | $10-50/month |
CSR is cheaper to host because it is just static files. SSR requires compute resources.
Modern Alternatives
Static Site Generation (SSG)
HTML is generated at build time, not request time. Best of both worlds for content that does not change per request:
- Fast like CSR (served from CDN)
- SEO-friendly like SSR (complete HTML)
- No server runtime needed
Limitation: Does not work for dynamic, personalized content.
Incremental Static Regeneration (ISR)
Pages are statically generated and revalidated at defined intervals. Combines static performance with reasonably fresh data.
Server Components (React)
React Server Components render on the server and send HTML (not JavaScript) to the client. Components that need interactivity are marked as client components. This hybrid approach minimizes JavaScript sent to the browser.
Streaming SSR
The server sends HTML progressively as it renders. The user sees parts of the page before the entire page is ready. Supported in Next.js 13+ with the App Router.
Decision Framework
| Requirement | Recommended Approach |
|---|---|
| Content/marketing site | SSG or ISR |
| Blog or documentation | SSG |
| E-commerce (product pages) | SSR or ISR |
| Dashboard/admin panel | CSR |
| Social media app | SSR + streaming |
| SaaS application (logged-in) | CSR (behind auth, SEO irrelevant) |
| Landing pages | SSG |
| Real-time data (stock prices) | CSR with WebSockets |
Our Approach
We use Next.js with a hybrid strategy:
- Static generation for marketing pages, blog posts, and landing pages
- Server-side rendering for product pages, search results, and personalized content
- Client-side rendering for dashboard pages behind authentication
This gives each page the optimal rendering strategy based on its requirements.
Contact us to discuss your application architecture.