MontageJS Subscribe
Front-End · Flagship

Rendering, Decoded: SSR, SSG, ISR, CSR

Four ways to get pixels on a screen — what each optimises for, and which fits your app. A field guide past the acronyms, with the one honest question that decides between them.

By Marco Reyes ·Front-End ·6 min read
Read the feature Jump to “which one when”
Rendering, Decoded: SSR, SSG, ISR, CSR
~/montage · rendering.tsx — four strategies, one honest question
Editor’s picks

Worth your afternoon

All sections →
The Frameworks Worth Learning Now
Frameworks

The Frameworks Worth Learning Now

React, Vue, Svelte, Solid — a decision guide by what you’re building, not by hype.

By Dana Whitfield · 14 min
HTML5 Grew Up — Here's What Changed
The Platform

HTML5 Grew Up — Here’s What Changed

The platform quietly absorbed a decade of framework ideas. What you get for free now.

By Sam Ellery · 9 min
The Modern JavaScript Worth Knowing
JavaScript

The Modern JavaScript Worth Knowing

Past the churn — the language features that actually changed how we write JS.

By Priya Nadkarni · 9 min
The desk

More from the sections

Front-End

State Without the Headache

Local, shared, server — a calm way to decide where your data should live.

9 min Frameworks

Working With React, Sensibly

The incumbent isn’t going anywhere — the patterns that age well, and the ones that don’t.

9 min The Platform

CSS Can Do That Now

Grid, container queries, :has() — the layout problems you no longer need JS for.

9 min JavaScript

A Mental Model for Async/Await

Promises, the event loop, and why your code runs in an order that surprises you.

9 min Learning

A Web-Dev Learning Path

What to learn, in what order, without drowning in the framework of the week.

9 min Front-End

Components That Compose

The old MontageJS idea that never went away — building UIs from parts that fit.

9 min
JavaScript

TypeScript: When It Earns Its Keep

Types cost keystrokes and buy confidence. When that trade pays off, and when it doesn’t.

9 min JavaScript

JavaScript’s Good Parts, Now

What to reach for, what to retire, and the sharp edges still worth avoiding.

6 min Frameworks

Getting to Know Vue (and Angular)

Two approachable paths into components — what each does best.

9 min Frameworks

When a Framework Earns Its Weight

Sometimes the platform is enough. The honest case for less JavaScript.

6 min Front-End

Working With Canvas (and CreateJS)

When the DOM isn’t enough — a gentle intro to drawing on the web.

6 min The Platform

The Web APIs Worth Knowing

From fetch to the observers — the browser built-ins that replace whole libraries.

9 min The Platform

Web Components and Reusable Widgets

Framework-agnostic UI that just works — the standard the whole industry slept on.

6 min Learning

Reading the Framework Tea Leaves

How to bet on what to learn next without chasing every new thing.

9 min Learning

Reading Other People’s Code

The underrated skill that turns junior devs senior faster than any course.

6 min Learning

Shipping Your First Real Project

Done beats perfect. How to finish and deploy instead of tutorial-looping.

6 min
Which one when · signature

Rendering strategies, head to head

sort a column · filter by strategy
Match-up First is best for Second is best for Which one when
SSRvsSSG Fresh, personalised data on every request. Fastest possible; pre-built at deploy time. Dynamic/authed pages → SSR. Content that rarely changes → SSG.
ISRvsCSR Static speed, revalidated in the background. Rich interactivity; nothing pre-rendered. Mostly-static with some freshness → ISR. App-like dashboards → CSR.
SSGvsISR Simplest; pure static output. Static plus periodic updates, no full rebuild. Docs/marketing → SSG. Large catalogues that change → ISR.
SSRvsCSR Content on first paint; SEO-friendly. Cheap to host; heavy client, light server. Public, content-first → SSR. Internal tools → CSR.
From the flagship

Real code, copy-ready

Read the flagship →
product/[id]/page.tsx · ISR 
// Next.js ISR — revalidate every 60 seconds
export async function generateStaticParams() { /* ... */ }

export const revalidate = 60;

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.id);
  return <h1>{product.name} — {product.price}</h1>;
}
The colophon

Who keeps the presses running

Tools, platforms, and learning communities that push the web forward alongside the writing on these pages.