Choosing between CSR, SSR, SSG, and ISR determines when and where HTML is generated, while understanding the Critical Rendering Path (DOM, CSSOM, render tree, layout, paint) reveals how browsers turn that HTML into visible pixels.
CSR renders in the browser, SSR on the server per request, SSG at build time, and ISR adds background revalidation to SSG. Each has distinct performance and SEO trade-offs.
The browser builds DOM from HTML, CSSOM from CSS, combines them into a render tree, calculates layout, then paints pixels. CSS blocks rendering; JavaScript blocks DOM parsing.
CSS blocks rendering until fully parsed. Synchronous scripts block DOM parsing. Minimizing these critical resources is the primary CRP optimization.
React 18 streaming sends HTML in chunks as components finish, allowing progressive display instead of waiting for the entire page to render on the server.
How and where your HTML is generated fundamentally determines your application's loading characteristics. Simultaneously, understanding how the browser converts HTML and CSS into pixels on screen is essential for optimizing what users see and when they see it.
CSR (Client-Side Rendering): The server sends a minimal HTML shell with a JavaScript bundle. The browser downloads, parses, and executes the JavaScript, which then generates the DOM. Users see a blank page (or loading spinner) until JavaScript finishes. Pros: rich interactivity, simple deployment, good for authenticated dashboards. Cons: slow initial load, poor SEO (search engines may not execute JavaScript), large bundle downloads.
SSR (Server-Side Rendering): The server generates complete HTML for each request, sending a fully rendered page. The browser displays content immediately, then "hydrates" it with JavaScript for interactivity. Pros: fast first contentful paint, excellent SEO, good for dynamic content. Cons: higher server costs, TTFB depends on server speed, full page re-renders on navigation without client-side routing.
SSG (Static Site Generation): HTML is generated at build time, not at request time. Pages are pre-rendered as static files and served from a CDN with minimal latency. Pros: fastest possible delivery, lowest server costs, trivial scaling. Cons: requires a rebuild to update content, impractical for highly dynamic or personalized data, build times grow with page count.
ISR (Incremental Static Regeneration): A Next.js innovation that combines SSG with on-demand updates. Static pages are served from the cache, and when a revalidation period expires, the next request triggers a background rebuild. The stale page is served immediately while the fresh version is generated. Pros: static-speed delivery with dynamic content freshness. Cons: Next.js-specific, stale content during revalidation window.
Streaming SSR: React 18 introduced streaming, where the server sends HTML in chunks as components finish rendering, rather than waiting for the entire page. Combined with Suspense, this allows the browser to display content progressively — the shell and fast components appear immediately while slow data-fetching components stream in later.
The Critical Rendering Path (CRP) is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into visible pixels:
Parse HTML to DOM: The browser reads HTML and builds the Document Object Model, a tree structure of all elements. This is incremental — the browser starts building the DOM as it receives HTML.
Parse CSS to CSSOM: The browser reads all CSS (inline, internal, external) and builds the CSS Object Model. Unlike DOM construction, CSSOM construction is not incremental — the browser blocks rendering until all CSS is parsed because later rules can override earlier ones.
Build Render Tree: The browser combines DOM and CSSOM into the render tree, which contains only visible elements with their computed styles. Elements with display: none are excluded. The <head> section is excluded.
Layout (Reflow): The browser calculates the exact position and size of each element in the render tree based on the viewport size. This is where percentages, flexbox, and grid are resolved into pixel values.
Paint: The browser fills in pixels — text, colors, images, borders, shadows. Painting happens in layers, and complex properties like transform and opacity get their own compositor layers for GPU-accelerated rendering.
Compositing: Layers are combined in the correct order to produce the final frame displayed on screen.
Minimize render-blocking resources: inline critical CSS, defer non-critical CSS with media attributes, and use async or defer on script tags. Reduce the number of critical resources and their sizes. Use <link rel="preload"> for resources needed immediately and <link rel="preconnect"> for third-party origins.
CSR renders in the browser (slow initial load, fast navigation). SSR renders on the server per request (fast initial load, higher server cost). SSG renders at build time (fastest delivery, stale content). ISR adds on-demand revalidation to SSG. The Critical Rendering Path explains why CSS is render-blocking and how to optimize first paint.
Fun Fact
The term 'Critical Rendering Path' was popularized by Ilya Grigorik at Google, who wrote the definitive guide on web performance. The concept that CSS is render-blocking surprises many developers — browsers intentionally delay painting until all CSS is loaded to avoid a Flash of Unstyled Content (FOUC), prioritizing visual correctness over speed.