SSR vs CSR vs SSG: Rendering Strategies Explained

Updated September 2026 · Written and maintained by the Progression Agency strategy team

How a page is rendered decides how fast it appears, how well search engines and AI crawlers can read it and how much it costs to host. This guide explains client-side rendering, server-side rendering, static site generation, incremental static regeneration and streaming, compares single-page and multi-page applications, and gives a rule for choosing per page rather than per site.

On this page · 8 sections

The four rendering strategies
SSR vs CSR for SEO
SSR vs CSR for performance
SPA vs MPA
How to choose per page
Frameworks and rendering support
Hosting implications
How Progression Agency applies this

The short answerUse static generation (SSG) for pages that are the same for everyone and change rarely: marketing pages, blog posts, documentation. Use server-side rendering (SSR) for pages that are public but differ per request or change often: search results, product listings with live stock, personalized landing pages. Use client-side rendering (CSR) for logged-in application screens where SEO does not matter and interactivity does. Modern frameworks such as Next.js, Nuxt, SvelteKit and Astro let you choose per route, which is the right way to decide.

Comparisons are based on each project’s official documentation as linked in the text. Progression Agency builds with all of the technologies compared and has no affiliate relationship with any of them.

The four rendering strategies

Client-side rendering (CSR)

The server sends a nearly empty HTML shell and a JavaScript bundle; the browser runs the JavaScript, fetches data and builds the page. First paint waits for the bundle and the data. This is how a classic React or Angular single-page application works.

Server-side rendering (SSR)

The server builds the full HTML for each request, sends it, and the browser then loads JavaScript to make it interactive (hydration). Users and crawlers get content immediately; the server does more work per request.

Static site generation (SSG)

Pages are rendered to HTML files at build time and served from a CDN. Fastest and cheapest to serve, but content is only as fresh as the last build unless combined with the next strategy.

Incremental static regeneration (ISR) and streaming

ISR (Next.js) rebuilds individual static pages on a schedule or on demand, combining static speed with fresh content. Streaming sends the HTML in pieces so the shell appears while slow data is still loading. React Server Components render parts of the page on the server and ship no JavaScript for them.

What the browser receives first — Server and static rendering put content in the first response; client rendering makes the browser build it.

SSR vs CSR vs SSG vs ISR
	CSR	SSR	SSG	ISR
Where HTML is built	Browser	Server, per request	Build time	Build time, refreshed on demand
First content	Slowest	Fast	Fastest	Fastest
Freshness	Live	Live	Stale until rebuild	Fresh within the revalidation window
SEO and crawlers	Weakest	Strong	Strong	Strong
Server cost	Lowest (static shell)	Highest	Lowest	Low
Personalization	Easy	Easy	Hard	Limited
Best for	Logged-in apps	Dynamic public pages	Content pages	Catalogs, blogs with frequent edits

SSR vs CSR for SEO

Google can execute JavaScript, but rendering is queued and budgeted, and other crawlers, social preview bots and AI assistants often read only the initial HTML. Server-rendered or static pages are indexed faster and more completely and give link previews and AI answers real content. Google’s own guidance on JavaScript SEO basics recommends server-side or pre-rendering for content that must be indexed.

SSR vs CSR for performance

SSR and SSG improve Largest Contentful Paint because the content is in the first response. CSR can feel faster after the first load because navigation happens in the browser, which is why frameworks combine both: render the first page on the server, then take over client-side. Interaction to Next Paint, the responsiveness metric in Core Web Vitals, depends on how much JavaScript runs, which Server Components and islands reduce. See speed optimization.

SPA vs MPA

A single-page application (SPA) loads one HTML document and updates it in place as the user navigates; a multi-page application (MPA) loads a new document for each page from the server. SPAs give app-like transitions and keep state between views; MPAs are simpler, index naturally and need less JavaScript. Modern frameworks are hybrids: Next.js and Nuxt render each route on the server and then navigate client-side, and Astro is an MPA that can add view transitions.

SPA vs MPA
	Single-page application	Multi-page application
Navigation	In-browser, no full reload	Full page load per route
Initial load	Heavier bundle	Lighter per page
SEO	Needs SSR or pre-rendering	Natural
State between pages	Kept in memory	Re-fetched or stored
Complexity	Higher (routing, state, hydration)	Lower
Best for	Dashboards, editors, logged-in apps	Content sites, stores, portals

How to choose per page

Rendering strategy by page type
Page	Strategy	Why
Home, service pages, landing pages	SSG or ISR	Same for everyone, must be fast and indexed
Blog and documentation	SSG or ISR	Content, rarely changes per request
Product listing with live stock	SSR or ISR with short revalidation	Public and frequently changing
Search results	SSR	Unique per query
Checkout, account, dashboard	CSR (or SSR shell + CSR)	Logged in, no SEO, interactive
Personalized landing page	SSR with edge middleware	Public but varies per visitor

SSG — Static. Build once, serve from CDN..

ISR — Incremental. Static plus on-demand refresh..

RSC — Server Components. No JS for server parts..

Route — Per route. Choose per page, not per site..

Frameworks and rendering support

Next.js supports all four strategies per route plus streaming and Server Components; Nuxt and SvelteKit support SSR, SSG and CSR per route; Astro is static by default with SSR and islands; Angular ships SSR and hydration. Plain React with Vite is CSR only. See Next.js vs React and Astro vs Next.js.

Hosting implications

SSG needs only a CDN; SSR and ISR need a server runtime or serverless functions, which is what Vercel, Netlify and Cloudflare provide and what drives their usage-based bills. See hosting for React and Next.js and Vercel vs Netlify.

How Progression Agency applies this

We decide rendering per route in every Next.js and Astro build: static for marketing pages, ISR for catalogs and content, SSR for search and personalization, client-side for logged-in screens. It is written into the technical plan and measured with Core Web Vitals after launch. See web development services.

Site slow or not indexing?

We audit rendering, hosting and Core Web Vitals and propose the fixes, page by page.

Request a performance review

Getting found in search

AI, AEO and what is changing

Paid media and lead generation

Websites and design

Choosing and working with an agency

Software and app development

Web development, platforms and hosting

Social, content and brand

By industry and by situation

Frequently asked questions

What is the difference between SSR and CSR?

SSR builds the HTML on the server for each request; CSR sends a shell and builds the page in the browser with JavaScript.

Is SSR better than CSR?

For public pages that must be fast and indexed, yes. For logged-in interactive screens, CSR is often simpler and adequate.

What is SSG?

Static site generation: rendering pages to HTML at build time and serving them from a CDN.

What is ISR?

Incremental static regeneration: static pages rebuilt on a schedule or on demand so they stay fresh without a full rebuild.

Is CSR bad for SEO?

It is weaker. Google can render JavaScript with delay; other crawlers and AI tools often cannot.

What is hydration?

Attaching JavaScript behavior to server-rendered HTML so it becomes interactive.

What is an SPA?

A single-page application: one HTML document updated in place as the user navigates.

What is an MPA?

A multi-page application: a new HTML document for each page.

Is Next.js SSR or CSR?

Both, chosen per route, plus SSG, ISR, streaming and Server Components.

Which rendering strategy is cheapest to host?

SSG: static files on a CDN. SSR costs the most because the server works per request.

Can one site mix rendering strategies?

Yes, and it should: static marketing pages, server-rendered dynamic pages, client-rendered app screens.

What are React Server Components?

Components rendered on the server that send no JavaScript to the browser, reducing bundle size.

Does SSR improve Core Web Vitals?

It usually improves Largest Contentful Paint; reducing JavaScript improves Interaction to Next Paint.

What is pre-rendering?

Generating HTML ahead of time (SSG) or with a headless browser for crawlers; SSG is the modern form.

Which does Progression Agency use?

All of them, per route, in Next.js and Astro builds.

Planning a website or web app?We design, build, deploy and host custom websites, React and Next.js applications and WordPress sites, with a written scope first.

Get a web proposal

Get a free marketing proposal

Tell us what you are trying to grow and we will come back with a plan, not a pitch deck. Same-day reply on weekdays.

SSR vs CSR vs SSG: Server-Side Rendering, Client-Side Rendering and Static Generation Explained (Plus SPA vs MPA)