Confused by all the acronyms? This blog breaks down CSR, SSR, SSG, ISR, Streaming, and PPR — so you know when to use what (and why).

What Even Is Rendering?

Let’s keep it simple:
Rendering is how your browser takes code and turns it into a visible website.

Depending on your app’s needs, this rendering can happen:

On your own device (called the client),
On a server before it reaches you,
Or even ahead of time — like prepping meals before guests arrive.

Different rendering strategies give you different trade-offs: speed, SEO, personalization, or freshness.

1. Client-Side Rendering (CSR)

Like buying IKEA furniture — you get the parts and build it at home.

The browser loads a blank HTML and some JavaScript.
The JavaScript builds the UI after the page loads.
Everything happens in the browser (the client).

Best for: Interactive apps like dashboards or tools where SEO isn’t a top concern.
Example: Single Page Apps built with plain React.

2. Server-Side Rendering (SSR)

Like ordering food from a restaurant — it’s cooked and served fresh every time.

The page is built on the server each time a user visits.
The user gets a fully-rendered HTML page instantly.
It’s dynamic — changes every time based on user or data.

Best for: News sites, dashboards, or apps that need SEO and fresh content.
Example: Next.js pages using getServerSideProps.

3. Static Site Generation (SSG)

Like baking cupcakes before the party starts.

Pages are generated once during build time.
Each user gets the same fast, pre-built HTML.
Perfect for content that doesn’t change often.

Best for: Blogs, documentation, landing pages.
Example: Next.js pages using getStaticProps.

SSG in action 🍪 Pre-rendered pages, served fresh and fast.

4. Incremental Static Regeneration (ISR)

Like baking your cupcakes, but letting some get refreshed behind the scenes when needed.

Pages are pre-built like in SSG.
When the content changes, a fresh version is created in the background.
You set how often a page should be revalidated.

Best for: Product pages, blogs that get occasional updates.
Example: Next.js pages with revalidate in getStaticProps.

5. Streaming / React Server Components (RSC)

Like watching Netflix — you get the video in chunks so you can start watching immediately.

Instead of sending the whole page at once, it streams the page in parts.
React Server Components let you render parts of your app on the server, reducing JavaScript on the client.
Users see content faster, even before everything is ready.

Best for: Complex apps that care about speed and user experience.
Example: Next.js apps built with the new app directory.

6. Partial Prerendering (PPR)

Like serving the crust of your pizza first and letting the toppings load after — but you never feel the wait.

PPR is the latest strategy introduced in Next.js 14+.
It lets you prerender parts of the page statically, and fill in dynamic parts later.
You get the speed of static rendering and the freshness of dynamic content — without a jarring loading state.

Best for: Pages that are partly static (like headers/layout) and partly dynamic (like user data or feeds).
Example: Next.js 14+ using React Server Components and prerender configuration.

When to Use What?

Here’s a quick way to think about it:

Use CSR for highly interactive apps (where SEO doesn’t matter much).

Example: A project management dashboard like Trello or Notion.

Use SSR for dynamic content that changes per user (and you need SEO).

Example: A user’s personalized news feed like Reddit or a dynamic job board like LinkedIn Jobs.

Use SSG for static pages like blogs and marketing sites.

Example: Company landing pages like Vercel.com or blog sites like dev.to.

Use ISR for mostly static pages that change occasionally.

Example: E-commerce product pages like Amazon or Nike.com where data changes but not instantly.

Use Streaming / RSC when you want a smoother user experience and performance.

Example: The logged-in experience of Spotify Web or YouTube Studio.

Use PPR when your page is a mix of static and dynamic — it’s the sweet spot!

Example: A user profile page on Twitter/X where the layout stays the same, but tweets and followers are dynamic.

TL;DR

CSR: Built in the browser. Great for apps, bad for SEO.
SSR: Built on the server every time. Fresh, SEO-friendly.
SSG: Prebuilt at deploy time. Super fast, but not dynamic.
ISR: Prebuilt with background updates. Best of both worlds.
Streaming: Send chunks of UI as they’re ready. Smooth experience.
PPR: Static + dynamic mix. Super smart, super fast.

Final Toughts

Rendering used to be simple — now we have choices.
And that’s actually a superpower, not a problem.

By picking the right rendering method (or combining a few), you can build web apps that are:

fast
SEO-friendly
personalized
and delightful to use

Don’t stress over memorizing acronyms like CSR, SSR, or PPR.
Just focus on the one goal that matters:

Show the user what they need, as quickly and efficiently as possible.

Rendering done right = speed 💨

Behind the Scenes: This Blog Uses On-Demand ISR

That means the page you’re reading was pre-rendered for speed, but it only updates when I choose to revalidate it (instead of automatically after a set time).
It’s the best of both worlds: fast like static pages, flexible like dynamic ones.

Curious how it works? 👉 Here’s how I built my blog system with ISR (opens in new tab)