How Next.js Rendering Works (CSR, SSR, SSG, ISR)

I still remember the first time I deployed a React app and proudly sent the link to a friend.

He opened it on his phone.
Blank screen.
Three seconds passed.
Then… content appeared.

“Why is it slow?” he asked.

That question pushed me deep into the world of rendering — and eventually into Next.js. If you’ve ever wondered why Next.js feels faster, why Google loves it, or why everyone keeps talking about CSR, SSR, SSG, and ISR, this story is for you.

Let’s break it down — calmly, practically, and like real developers do.

The Core Question: Where Is Your Page Rendered?

Rendering is simple at heart:

Where does your HTML get created — in the browser or on the server?

Next.js gives you four answers to that question.

Each one solves a different real-world problem.

1. Client-Side Rendering (CSR)

This is where most of us start.

With CSR, the browser downloads a mostly empty HTML file and then JavaScript runs to fetch data and build the page.