Side by side

SSRvsCSR

What is the difference between SSR and CSR?

Updated September 30, 20262 min read7 differences

In short

Server-side rendering (SSR) builds full HTML on the server for each request, so content shows fast, while CSR builds the page in the browser with JavaScript.

Web Developmentp. 43

SSR

Server-Side Rendering

SSR is a technique where the server builds the full HTML for a page on each request, so users and search engines receive ready-to-read content immediately.

Read the page on SSR

Web Developmentp. 9

CSR

Client-Side Rendering

CSR is a rendering approach where the browser downloads a mostly empty HTML page plus JavaScript, then builds the page content on the user's device.

Read the page on CSR

SSR and CSR compared

Aspect	SSR	CSR
Where HTML is built	On the server, for every request	In the browser, by running JavaScript
First content	Fast: shown as soon as the HTML arrives	Slower: shown after the JavaScript loads and runs
Later navigation	Can need a new server response per page	Fast view changes; only data is fetched
SEO	Crawlers get complete HTML immediately	Crawlers must run JavaScript to see the content
Server load	Higher: the server renders on each request	Lower: the server mostly serves static files and APIs
Hosting	Needs a server or serverless runtime that runs code	Can be hosted as static files on a CDN
Best for	Content sites, online stores and pages that must rank in search	Dashboards, internal tools and interactive apps behind a login

The difference, explained

Server-side rendering (SSR) means the server runs the page's code for each request and sends back finished HTML. Client-side rendering (CSR) means the server sends a mostly empty HTML shell plus a JavaScript bundle, and the browser builds the page by running that code, as in a classic single-page application (SPA).

The key difference is where the HTML is produced, which changes what users see first. With SSR, content is visible as soon as the HTML arrives, which helps slow devices and search engines. With CSR, the user waits for JavaScript to download and run, but after that, moving between views is fast because only data needs to be fetched.

Modern frameworks mix both. A common pattern renders the first view on the server and then hydrates it, which means the browser attaches JavaScript event handlers to the existing HTML so the page becomes interactive and later navigation happens on the client. Streaming and partial hydration go further by sending or activating only the parts that need it.

A common misconception is that server-rendered pages need no JavaScript. An SSR page is visible early, but buttons and forms may not respond until hydration finishes, so a large JavaScript bundle can still make it feel slow.

Which one should you use?

Choose SSR when…

Search visibility and link previews matter for most pages.
Many users are on slow phones or networks.
Content is personalized or changes on every request.

Choose CSR when…

The app lives behind a login where SEO does not matter.
The interface is highly interactive, like an editor or a dashboard.
You want to host only static files and a separate API.

Where the list of products becomes HTML

SSRjavascript

// SSR: the server builds the HTML before responding
app.get("/products", async (req, res) => {
  const products = await db.getProducts();
  const items = products
    .map((p) => `<li>${escapeHtml(p.name)}</li>`)
    .join("");

  res.send(`<html><body><ul>${items}</ul></body></html>`);
});

CSRjavascript

// CSR: the browser fetches data, then builds the HTML
const res = await fetch("/api/products");
const products = await res.json();

const list = document.createElement("ul");
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = p.name;
  list.append(li);
}
document.getElementById("root").append(list);

Readers ask

Is SSR better for SEO than CSR?

Usually, yes. Search engines can render JavaScript, but server-rendered HTML is indexed faster and more reliably, and link previews in chat and social apps typically read only the initial HTML.

Can you use SSR and CSR together?

Yes, and most modern frameworks do. The first page is rendered on the server and then hydrated, after which navigation and updates happen on the client.

Is CSR the same as a single-page application?

They are closely related but not identical. CSR describes where the HTML is built, while a single-page application describes an app that updates one page instead of loading new ones, which usually relies on CSR.