CSR, SSR, SSG, ISR — difference between rendering strategies

In modern frontend applications there are several rendering strategies. They determine when and where HTML content will be rendered: on client, on server or in advance.

CSR — Client-Side Rendering (Client Rendering)

HTML loads empty, all content and logic load via JavaScript on client side.

How CSR Works

Server returns empty HTML file
JS application initializes in browser
Data loads via API

CSR Pros

Fast response after load
No server load
Full control on client

CSR Cons

Poor SEO (if SSR/prerendering not used)
Slow Time-to-Content
Requires JS for display

SSR — Server-Side Rendering (Server Rendering)

HTML is rendered on server on each request. User receives already generated page.

How SSR Works

Client makes request → server generates HTML
After load page is hydrated by React application

SSR Pros

Excellent SEO
Fast First Contentful Paint
Suitable for dynamic content

SSR Cons

Server load
More complex architecture
Delay on first request

SSG — Static Site Generation (Static Generation)

HTML pages are generated at build time and placed as static files.

How SSG Works

During project build (npm run build) HTML files are generated
Server simply serves already ready pages

SSG Pros

Lightning speed
Excellent SEO
Almost zero server load

SSG Cons

Content doesn't update without new build
Not suitable for frequently updated pages

ISR — Incremental Static Regeneration (Incremental Generation)

Combination of SSG + SSR: pages are generated on the fly, but cached. Used in Next.js.

How ISR Works

First cached page version is served
If page is stale — regenerated in background

tsx

export async function getStaticProps() {
  return {
    props: {},
    revalidate: 60, // page rebuilds every 60 sec
  };
}

ISR Pros

SSG speed + SSR freshness
Flexible content updates
Excellent for blogs, marketplaces

ISR Cons

Need to properly configure cache and revalidate

Comparison Table

Characteristic	CSR	SSR	SSG	ISR
Where rendered?	In browser	On server	At build	On server + cache
SEO	Poor	Excellent	Excellent	Excellent
Load speed	Medium	Medium	Very fast	Fast
Suitable for	SPA, dashboards	News sites	Blogs, marketing	E-commerce, content
Data updates	Via API	On each request	Only at build	Via revalidate
Conclusion:

CSR — for dynamic applications where SEO isn't important (admin panels, personal accounts).
SSR — for dynamic public pages.
SSG — for marketing landing pages, blogs.
ISR — best of both worlds: speed and freshness.

CSR — Client-Side Rendering (Client Rendering)How CSR WorksCSR ProsCSR ConsSSR — Server-Side Rendering (Server Rendering)How SSR WorksSSR ProsSSR ConsSSG — Static Site Generation (Static Generation)How SSG WorksSSG ProsSSG ConsISR — Incremental Static Regeneration (Incremental Generation)How ISR WorksISR ProsISR ConsComparison Table

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems