Articles/JavaScript

Server-Side Rendering (SSR) vs Client-Side Rendering (CSR) — What's the Difference?

SSR renders a page's HTML on the server and sends complete markup to the browser; CSR sends a mostly empty HTML shell and renders the page in the browser using JavaScript after it loads.

Published October 5, 2026

With SSR the server sends fully rendered HTML for each request; with CSR it sends a near-empty page and JavaScript builds the content in the browser. SSR gives faster first paint and better SEO, CSR gives smooth interactions after load.

The concept

SSR: the browser shows content immediately, then JavaScript 'hydrates' it to make it interactive.

CSR: the browser downloads JS, runs it, fetches data and renders. The first view is slower and crawlers may see less, but navigation afterwards can be instant.

Request flow

SSR: request → server renders HTML → page visible → hydrate
CSR: request → empty HTML → download JS → fetch data → render

Practical examples

SSR in Next.js

export default async function Page() {
  const posts = await getPosts()  // runs on the server
  return <List posts={posts} />
}

CSR with useEffect

'use client'
function Page() {
  const [posts, set] = useState([])
  useEffect(() => { fetch('/api/posts').then(r => r.json()).then(set) }, [])
  return <List posts={posts} />
}

Static export hybrid

SSG: HTML generated at build time, served from a CDN

Common mistakes

  • Using CSR for public content that needs SEO.
  • SSR without caching, overloading the server.
  • Hydration mismatches from random or time-based values.

Key takeaways

  • SSR = HTML first, CSR = JS first.
  • SSR/SSG help SEO and speed.
  • Mix them per page.

FAQ

What is SSG?

Static site generation: pages rendered once at build time.

What is hydration?

Attaching event handlers to server-rendered HTML.

More JavaScript articles