Skip to main content
Development

Server-Side Rendering

SSR

Portrait of Lukas Horvath, co-founder of Roelu Studio
Lukas HorvathCo-founder

What is Server-Side Rendering?

Server-side rendering, often shortened to SSR, is a way of delivering web pages where the server assembles the full HTML for each request and sends it ready-made to the visitor. The browser displays the content immediately, then loads any interactive scripts in the background. Server-side rendering is the opposite of client-side rendering, where the browser receives an empty shell and has to build the page itself.

Why it matters

Client-side rendering broke SEO for a generation of web apps. Google would crawl a page, see an empty div, and rank it accordingly. SSR fixed that. The crawler sees the same finished HTML the visitor does, which means the page can rank. Speed is the other win. The visitor sees real content within milliseconds instead of staring at a spinner while JavaScript downloads. For a marketing site, a docs site, or anything that depends on organic traffic, SSR is not optional. It is the difference between a site that ranks and a site that does not.

How it works

When a visitor types in a URL, the request hits a server running Node.js or similar. The server pulls the latest content from the CMS, runs the React or Astro components that describe the page, and produces a complete HTML document. That HTML lands in the visitor's browser and renders instantly. JavaScript loads in parallel and takes over interactivity — clicks, forms, animations — without the visitor noticing the handoff. Frameworks like Next.js handle all of this automatically. The team writes one component and the framework decides whether to render it on the server for each request, pre-build it at deploy time, or refresh it on a schedule.

Related terms

  • Static Site Generation

    Development

    Building every page of a website in advance, once, and storing the result as plain files ready to ship from a CDN. The output is a site that loads in…

  • Incremental Static Regeneration

    Development

    A way of keeping a static site fresh without rebuilding the whole thing every time. New or edited pages get regenerated on the fly, so marketing can publish…

  • Next.js

    Development

    A modern web framework for building fast, search-friendly websites and apps in React. It is the default choice for serious scale-up sites where speed, SEO, and…

  • React

    Development

    The most widely used way of building interactive websites and apps in JavaScript. If your product has buttons, dashboards, or live data, there is a strong…

  • Page Speed

    Performance

    How quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…

  • Static vs Dynamic Website

    Websites

    Static sites are pre-built pages served as files — fast and cheap. Dynamic sites generate pages on demand from a database — more flexible but more complex.…

  • Core Web Vitals

    Performance

    Google's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…