DevToolbox

Server-Side Rendering and TTFB — SSR Performance Guide

Understand how server-side rendering affects TTFB and other Web Vitals. Compare SSR, SSG, ISR, and CSR rendering strategies with their performance tradeoffs.

Architecture

Detailed Explanation

Rendering Strategies and Web Vitals

The choice of rendering strategy — CSR, SSR, SSG, or ISR — has a profound impact on TTFB, FCP, LCP, and INP.

Rendering Strategy Comparison

Strategy TTFB FCP LCP INP CLS
CSR (Client-Side) Fast Slow Slow Risk Low
SSR (Server-Side) Slow Fast Fast Risk Low
SSG (Static) Fast Fast Fast Low Low
ISR (Incremental Static) Fast* Fast Fast Low Low

Client-Side Rendering (CSR)

CSR sends a minimal HTML shell and renders everything with JavaScript:

<div id="root"></div>
<script src="bundle.js"></script>
  • TTFB: Fast (small HTML)
  • FCP: Slow (nothing to show until JS runs)
  • LCP: Slow (content rendered by JS after download + parse + execute)
  • INP: High risk (hydration can block interactions)

Server-Side Rendering (SSR)

SSR generates full HTML on each request:

  • TTFB: Slower (server must render the page)
  • FCP: Fast (meaningful HTML arrives in first response)
  • LCP: Fast (LCP content is in the HTML)
  • INP: Risk during hydration

Optimizing SSR TTFB:

// Next.js streaming SSR reduces TTFB
// The browser starts rendering before the full response arrives

// app/page.tsx (React Server Components)
import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header /> {/* Renders immediately */}
      <Suspense fallback={<Skeleton />}>
        <SlowContent /> {/* Streams in when ready */}
      </Suspense>
    </>
  );
}

Static Site Generation (SSG)

SSG pre-renders pages at build time. HTML files are served directly from a CDN:

  • TTFB: Fastest (CDN-served static files)
  • FCP: Fastest (full HTML, no server processing)
  • LCP: Fastest (all content in HTML)

Incremental Static Regeneration (ISR)

ISR combines SSG with on-demand revalidation:

// Next.js ISR
export const revalidate = 60; // Regenerate every 60 seconds

export default async function Page() {
  const data = await fetchData();
  return <Content data={data} />;
}

First visit serves the cached static page (fast TTFB). In the background, the page regenerates with fresh data for the next visitor.

Streaming SSR and React Server Components

Modern frameworks support streaming, which dramatically improves perceived performance:

  1. Server sends the HTML <head> and shell immediately (fast TTFB)
  2. Above-fold content streams next (fast FCP and LCP)
  3. Below-fold content and interactive components stream later
  4. Hydration happens progressively (better INP)

Use Case

Choosing the right rendering strategy is an architectural decision with major performance implications. Next.js, Nuxt, SvelteKit, and Remix all offer multiple rendering modes. E-commerce product pages often use ISR, marketing pages use SSG, and personalized dashboards use SSR with streaming. Understanding the TTFB tradeoffs helps architects make informed decisions.

Try It — Web Vitals Reference

Open full tool →

Related Topics

TTFB Optimization — Time to First Byte Best Practices

Supplementary Metrics

FCP First Contentful Paint Guide — Measuring Initial Render

Supplementary Metrics

LCP Optimization Strategies — Largest Contentful Paint Guide

Core Web Vitals

JavaScript Impact on INP — Main Thread Optimization

Optimization

TBT Reduction — Total Blocking Time Optimization Guide

Supplementary Metrics