SSR

Abbreviation · Development

Definitions

  1. SSR, or Server-Side Rendering, is a web development technique where HTML pages are generated on the server for each request rather than being constructed in the browser by JavaScript. When a user visits an SSR page, the server runs the application code, fetches necessary data, renders the complete HTML, and sends it to the client. This contrasts with client-side rendering (CSR), where the browser downloads a minimal HTML shell and JavaScript bundle that builds the page dynamically. SSR improves initial page load performance, search engine optimization (SEO), and accessibility because content is immediately available in the HTML response. Popular frameworks supporting SSR include Next.js for React, Nuxt.js for Vue, and SvelteKit for Svelte. Many modern applications use a hybrid approach, combining SSR for the initial load with client-side hydration for subsequent interactivity.

    In plain English: Building web pages on the server before sending them to the browser, instead of making the browser build them — faster initial load and better for search engines.

Etymology

1990s
All web pages are server-rendered by default. CGI scripts and PHP generate HTML on the server before sending it to the browser.
2010
The rise of single-page applications (React, Angular) shifts rendering to the client. Server-side rendering declines.
2016
Next.js launches, reviving SSR as a first-class pattern for React apps to improve SEO and initial load performance.
2020s
SSR, SSG, and ISR become standard options in modern frameworks. The term crystallizes as a distinct architecture choice.

Origin Story

The Rendering Strategy That Brought Back the Server

SSR, or Server-Side Rendering, is the practice of generating HTML on the server rather than in the browser. Ironically, the term only became necessary after client-side rendering made it the exception rather than the norm. In the early web (1990s through mid-2000s), all rendering was server-side by default: PHP, ASP, JSP, and similar technologies generated complete HTML pages on the server, and browsers simply displayed them. When single-page application (SPA) frameworks like Angular (2010), React (2013), and Vue (2014) gained popularity, rendering shifted to the browser. JavaScript would download, execute, and build the page client-side. This was great for interactivity but terrible for search engines and initial page load times, since crawlers and users saw a blank page until JavaScript finished running. The 'SSR' label emerged around 2015-2016 as React developers began exploring ways to render React components on the server for the initial page load, then 'hydrate' them into interactive client-side components. Next.js, created by Vercel's Guillermo Rauch in 2016, made SSR practical for React apps and popularized the pattern. The term captured a full-circle moment in web development: what had once been the only way to build websites became a specialized technique with its own acronym.

Context: React / JavaScript framework ecosystem, 2015-2016

Fun fact: Google's search crawler did not reliably execute JavaScript until around 2018, meaning that for years, SPAs without SSR were essentially invisible to the world's dominant search engine.

Related Terms