Learn the concept
Rendering Strategy Architecture
Client-side rendering (CSR) sends a minimal HTML shell and renders everything in the browser via JavaScript — fast TTFB but slow first paint and poor SEO. Server-side rendering (SSR) generates full HTML on the server — slower TTFB but fast first paint and good SEO. Modern apps often use hybrid approaches where different routes use different strategies.
The rendering strategy you choose is one of the most impactful architectural decisions in frontend development. It affects how fast users see content, how search engines index your pages, what infrastructure you need, and how complex your codebase becomes.
In CSR (traditional single-page application approach), the server sends a nearly empty HTML file with a <script> tag. The browser downloads and executes the JavaScript, which then renders the entire UI.
The loading sequence:
index.html — receives a minimal shell (<div id="root"></div>)Advantages:
Disadvantages:
In SSR, the server executes the React application and sends fully rendered HTML to the browser.
The loading sequence:
Advantages:
Disadvantages:
Static Site Generation (SSG) — Pages are rendered at build time, not request time. Combines SSR's SEO benefits with CDN's speed. Best for content that doesn't change often (blogs, docs, marketing pages).
Incremental Static Regeneration (ISR) — SSG with background revalidation. Pages are static but refresh automatically after a time period. Best for semi-dynamic content (product pages, news articles).
Streaming SSR — Server sends HTML progressively as it renders. The browser shows early content while waiting for slower data. Uses React Suspense boundaries to define streaming chunks.
React Server Components (RSC) — Components run on the server and send rendered output (not JavaScript) to the client. Server Component code never reaches the browser, dramatically reducing bundle size. Client Components handle interactivity.
| Scenario | Best Strategy | Why | |----------|---------------|-----| | Blog / documentation | SSG | Content rarely changes, SEO critical | | E-commerce product page | ISR | SEO critical, content changes occasionally | | Social media feed | Streaming SSR | Personalized, SEO helpful, data-heavy | | Admin dashboard | CSR | Authenticated, no SEO, rich interactivity | | Marketing landing page | SSG | Performance critical, static content | | Real-time chat | CSR | Highly interactive, no SEO need |
Most modern applications use hybrid rendering — Next.js allows different routes to use different strategies within the same app.
CSR and SSR are not either/or — they're ends of a spectrum. CSR optimizes for simplicity and interactivity at the cost of initial load speed and SEO. SSR optimizes for fast first paint and SEO at the cost of server complexity and hydration overhead. Modern frameworks (Next.js, Remix) enable per-route rendering strategies so you can choose the best approach for each page.
// CSR: The server sends this minimal HTML
// <html>
// <body>
// <div id="root"></div>
// <script src="/bundle.js"></script>
// </body>
// </html>
// bundle.js does ALL the rendering
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</BrowserRouter>
);
}
// Nothing renders until this JS downloads and executes
const root = createRoot(document.getElementById('root'));
root.render(<App />);
// Timeline:
// 1. Empty HTML loads instantly (fast TTFB)
// 2. JS bundle downloads (could be 500KB+)
// 3. JS executes, fetches data, renders UI
// 4. User finally sees content (slow FCP)Using ISR to serve product pages with static performance while keeping prices and availability fresh — pages revalidate every few minutes without requiring full rebuilds
Using CSR for authenticated dashboards where SEO doesn't matter — rich client-side interactivity with real-time data updates and no server rendering overhead
Using SSG for blog posts and landing pages that rarely change — pre-built HTML served from CDN gives the fastest possible load time and perfect SEO
Build the same page three ways (CSR with Vite, SSR with Next.js, SSG with Next.js) and measure TTFB, FCP, LCP, and TTI with Lighthouse to see the real-world differences
Build a Next.js app that uses SSG for the landing page, ISR for a product catalog, SSR for a personalized feed, and CSR for a settings page — demonstrating per-route rendering strategies
Switched their landing page from CSR to SSR to reduce Time to Interactive by 50% on mid-range mobile devices — users could read content while JavaScript loaded in the background
Next.js supports all rendering strategies (CSR, SSR, SSG, ISR, streaming, RSC) within a single app — enabling per-route optimization based on each page's requirements
Uses SSR with streaming for their Hydrogen framework (React-based storefront) to deliver fast initial content for product pages while loading interactive elements progressively