SSR vs. CSR vs. Static Site Generation: TTFB, Core Web Vitals & SEO

1. The Five Modern Rendering Paradigms

To architect resilient web applications, engineering leaders must categorize rendering models by where and when HTML generation occurs:

• Client-Side Rendering (CSR / SPA): The server returns an empty HTML skeleton (<div id="root"></div>) accompanied by a massive JavaScript bundle (Vite/Webpack React SPA). The client browser downloads, parses, and executes the JavaScript bundle, which subsequently fires client-side AJAX/fetch queries to populate data and mount DOM elements. While snappy during in-app navigation, initial page loads suffer from agonizing multi-second white screens.
• Static Site Generation (SSG): All HTML, CSS, and initial data are compiled at build time on a CI/CD build worker. The pre-rendered HTML files are deployed directly to a global CDN. SSG delivers unbeatable TTFB (15ms–30ms) and rock-bottom hosting costs, but is crippled by linear build time expansion on sites with over 50,000 pages.
• Server-Side Rendering (SSR): For every incoming HTTP request, the Node.js/Edge server executes React components, queries databases, and emits a fully formed HTML document in real time. SSR guarantees 100% fresh data and immediate SEO indexing, but taxes origin CPU resources and increases TTFB if database queries are unoptimized.
• Incremental Static Regeneration (ISR): Combines the speed of SSG with the freshness of SSR. Pages are generated statically upon first request and cached at the edge. When a subsequent request arrives after a defined revalidate window, the edge serves stale HTML while re-generating the page in the background.
• Streaming SSR with React Server Components (RSC): The cutting edge of full-stack engineering. React components execute exclusively on the server without shipping their code to the client bundle. The server streams HTML chunks over HTTP using chunked transfer encoding (Transfer-Encoding: chunked), allowing browsers to render the document progressively with zero client-side hydration penalty for non-interactive UI.

2. Search Engine Crawlers & The Two-Wave Rendering Myth

For years, proponents of Client-Side Single Page Apps (CSR) defended pure client rendering by citing Googlebot's ability to execute JavaScript. While Googlebot does possess a headless Chromium rendering service, relying on client-side JS rendering introduces catastrophic SEO liabilities:

• Crawl Budget & Rendering Queues: Googlebot operates a two-wave indexing pipeline. In Wave 1, Googlebot fetches the raw HTML and indexes text immediately. If the HTML is empty (as in CSR), the page is placed into a secondary rendering queue. Depending on global crawler load, Wave 2 rendering can be delayed by days or weeks, causing newly published breaking news or pricing updates to vanish from search results.
• Non-Google Crawlers: Search engines like Baidu, Yandex, and Naver have severely limited or zero headless JavaScript rendering capabilities. They see only the raw HTML response. If you ship a CSR application, non-Google engines index completely blank pages.
• Social Sharing & Open Graph Previews: Scrapers for Twitter/X, Facebook, LinkedIn, Slack, and Discord never execute JavaScript. When a user pastes a link to a CSR page, social scrapers parse the empty HTML shell, failing to extract dynamic og:title, og:description, or og:image preview tags.

3. The Hydration Bottleneck & The "Uncanny Valley"

In traditional Server-Side Rendering (SSR), the server emits complete HTML, allowing the browser to paint the visual UI quickly (fast FCP and LCP). However, before the user can interact with buttons, menus, or forms, the browser must execute Hydration.

Hydration is the process whereby the client-side JavaScript bundle boots up, traverses the existing DOM tree, recreates the internal React Virtual DOM hierarchy, and attaches event listeners. During this critical interval—the Uncanny Valley of web performance—the web page appears visually complete, but is completely unresponsive to user clicks, producing terrible Interaction to Next Paint (INP) and Total Blocking Time (TBT) scores. React Server Components and fine-grained islands architecture (Astro) eliminate this bottleneck by stripping non-interactive UI entirely from the hydration bundle.

4. Technical Benchmark: Rendering Architecture Comparison

5. Production Implementation: Streaming SSR with React Suspense Boundaries

The following Next.js App Router implementation demonstrates how Streaming Server-Side Rendering progressively streams critical shell HTML immediately while asynchronously fetching high-latency database queries inside a <Suspense> boundary:

// app/products/[slug]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

interface PageProps {
  params: Promise<{ slug: string }>;
}

// Fast Server Component: Critical Hero Shell (Streams sub-30ms)
async function ProductShell({ slug }: { slug: string }) {
  const product = await getProductMeta(slug);
  if (!product) notFound();

  return (
    <header className="product-hero">
      <h1 className="text-4xl font-bold">{product.title}</h1>
      <p className="text-xl text-gray-400">{product.subtitle}</p>
    </header>
  );
}

// Slow Asynchronous Component: Real-Time Dynamic Inventory & Reviews
async function LiveInventoryData({ slug }: { slug: string }) {
  // Heavy database query or third-party ERP lookup
  const inventory = await fetchWarehouseStock(slug);
  return (
    <div className="inventory-badge bg-green-900 text-green-300 p-3 rounded">
      <strong>{inventory.availableUnits}</strong> units in stock ready to ship.
    </div>
  );
}

export default async function ProductPage({ params }: PageProps) {
  const { slug } = await params;

  return (
    <main className="product-page max-w-5xl mx-auto p-6">
      <ProductShell slug={slug} />
      
      {/* Non-blocking Suspense boundary streams inventory when ready */}
      <Suspense fallback={<div className="animate-pulse h-12 bg-slate-800 rounded" />}>
        <LiveInventoryData slug={slug} />
      </Suspense>
    </main>
  );
}

Frequently Asked Questions: SSR, CSR, and SSG