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

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