For years, frontend developers have been stuck in an annoying trade-off:

SSG (Static Site Generation) : Fast, but data gets stale

SSR (Server-Side Rendering) : Fresh data, but slower

It always felt like:

“Pick speed OR freshness… you can’t have both.”

But what if you didn’t have to choose?

That’s where Partial Prerendering (PPR) comes in.

Table of Contents

The Problem: Blank Screen vs Spinner Hell

The Idea: The Swiss Cheese Model

Real-World Scenario: Buying Concert Tickets

How PPR Actually Works

Code Example (Next.js + Suspense)

Why PPR is a Game Changer

Mental Model

Final Thoughts

The Problem: Blank Screen vs Spinner Hell

Let’s say you're building something like an e-commerce site.

A user clicks on a product page.

Now depending on your rendering strategy…

❌ SSR (The Waiting Game)

The server waits to fetch:

User name

Personalized price

Cart count

Then sends the page

Result:

White screen for 1–2 seconds

User thinks: “Is this site slow?”

❌ CSR (Spinner Chaos)

The page loads…