Glossary · Web Development

Server-Side Rendering (SSR)

Server-side rendering generates a page's HTML on the server for each request, so the browser receives ready-to-display content before any JavaScript runs.

Updated October 6, 2026

Server-side rendering (SSR) is a technique where the server builds the full HTML of a page, usually at request time, and sends it to the browser, as opposed to sending an empty shell that JavaScript fills in.

Why it matters

SSR shows content sooner, helps crawlers and link previews read the page, and works better on slow devices. The trade-offs are server load, higher time to first byte if rendering is slow, and the need for hydration to make the page interactive. Caching rendered output at a CDN reduces the cost.

Example

Compare what each approach returns for the same page:

<!-- Client-rendered -->
<div id="root"></div>

<!-- Server-rendered -->
<div id="root"><h1>Blue Kettle</h1><p>$29</p></div>

The second displays text even if the script fails or is slow.

Common mistakes

  • Assuming SSR is always faster. Slow data fetching on the server delays everything.
  • Using browser-only objects like window in code that also runs on the server.
  • Caching personalized pages publicly and leaking one user's content to others.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · PerformanceTTFB (Time to First Byte)TTFB measures the time from starting a request until the first byte of the response arrives, covering DNS, connection, TLS and server work.Guide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min readGuide · WordPressWordPress Slow Site Speed Checklist: Find and Fix the BottleneckA practical WordPress speed checklist covering hosting, TTFB, caching, images, plugins and database cleanup, with measurement tools and WP-CLI commands.8 min readGlossary · Web DevelopmentChrome DevToolsChrome DevTools is the set of debugging and profiling tools built into Chrome for inspecting HTML, CSS, JavaScript, network requests and performance.Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Guide · Hosting & CDNCDN Explained: What It Does, When You Need One, and How Caching WorksUnderstand how a content delivery network works, which headers control caching, what origin shield does, when a CDN helps or hurts, and how to verify it is working.7 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.