Websites today are not just simple pages with text. They are apps—interactive, smart, and often as complex as the apps you install on your phone. When you open Instagram in a browser, you don’t just see a single page. The site talks to servers, loads pictures, checks your messages, and keeps updating in real time.

But here’s a question: who actually builds the page you see on the screen?

Is it your own browser (your computer)? Or is it the server (someone else’s powerful computer on the internet)?

If you’ve used websites, you might have noticed two things:

1. Some load instantly with all the content ready.

2. Some show a blank screen or spinner, then slowly fill in.

The difference? Where the page is built — on your computer (browser) or on someone else’s computer (the server).

This question leads us to CSR (Client-Side Rendering) and SSR (Server-Side Rendering). And if you’ve heard of Next.js, you know it plays a big role in SSR. Let’s explore this world step by step.

🍔 Rendering Explained: Like Getting Food in a Restaurant

Think about being in a restaurant. You’re hungry, and you want food. The food here is your web page.

• CSR (Client-Side Rendering – the React way)
  The waiter brings you all the raw ingredients—vegetables, rice, spices—and hands you a mini stove at your table. You now have to cook your meal before you can eat.

  • Result: You wait longer to take your first bite.

  • But once you’re set up, you can cook more dishes quickly without waiting for the chef again.

• SSR (Server-Side Rendering – the Next.js way)
  This time, the chef in the kitchen prepares your full meal and serves it hot.

  • Result: You eat faster (no waiting with empty plates).

  • Downside: The chef has to prepare each new dish fresh for every customer, which takes kitchen effort (server cost).

• SSG (Static Site Generation)
  The chef cooks meals in advance, stores them neatly, and simply reheats them when you order.

  • Result: You get your food almost instantly.

  • Downside: If the menu changes, some meals may become outdated until the chef updates them.

This restaurant story is exactly how web rendering works.

🎬 How SSR Works in Next.js

Let’s dive deeper into SSR (Server-Side Rendering), especially in Next.js.

1. You click a link or type a URL.
   Your request travels through the internet to the server hosting the website.

2. The server does the hard work.

   • It collects data (maybe from a database or an API).

   • It builds the full HTML page with that data included.

3. The server sends back the page.
   You instantly see a proper page with content—not a blank screen.

4. Hydration happens.
   React (the JavaScript library) now activates the page. Buttons start working, dropdowns expand, animations run.

Think of it like watching a movie:

• You get to see the movie immediately (SSR gives you the full HTML).

• Then the crew arrives behind the scenes (React hydration) to let you pause, rewind, or change subtitles.

📊 CSR vs SSR vs SSG: A Quick Comparison

Here’s a simple chart to compare these methods:

💻 Code Examples

Example 1: SSR with Next.js (App Router)

// app/products/page.tsx
import { Suspense } from "react";

async function ProductsList() {
  const res = await fetch("https://api.example.com/products", {
    cache: "no-store" // always fresh
  });
  const products = await res.json();

  return (
    <ul>
      {products.map((p: any) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

export default function Page() {
  return (
    <>
      <h1>Products</h1>
      <Suspense fallback={<p>Loading…</p>}>
        <ProductsList />
      </Suspense>
    </>
  );
}

👉 Here, the server fetches products and sends ready-to-display HTML. Your screen isn’t blank—it’s full of content immediately.

Example 2: CSR (Classic React SPA)

"use client";
import { useEffect, useState } from "react";

export default function Products() {
  const [items, setItems] = useState<any[]>([]);

  useEffect(() => {
    fetch("/api/products").then(r => r.json()).then(setItems);
  }, []);

  return (
    <>
      <h1>Products</h1>
      {items.length ? (
        items.map(i => <div key={i.id}>{i.name}</div>)
      ) : (
        "Loading..."
      )}
    </>
  );
}

👉 This starts with an empty page, then fetches data, then shows products. That’s why CSR often feels slower at the start.

🧠 When Should You Use What?

Choosing between CSR, SSR, and SSG isn’t random. Each has a purpose.

• Use CSR (React SPA)

  • For apps that live behind a login wall (e.g., dashboards, admin panels).

  • SEO doesn’t matter because Google doesn’t need to crawl private data.

• Use SSR (Next.js)

  • For pages that need to appear fast and rank well on Google.

  • Examples: blogs, e-commerce product pages, live news feeds.

• Use SSG/ISR

  • For sites where content rarely changes (docs, static blogs, portfolios).

  • Or use ISR if it changes sometimes (catalogs, event listings).

💡 Pro tip: Real-world Next.js apps often mix them. Some pages use SSR, some use SSG, and some parts of the page use CSR. That’s the true power of Next.js—it lets you combine the best of all worlds.

🔑 Why SSR in Next.js Is Special

React itself doesn’t handle SSR directly—it’s focused on CSR. But Next.js brings SSR to React apps with extra superpowers:

1. SEO Friendly – Google sees the full page right away.

2. Streaming with Suspense – Next.js can send pieces of a page as they are ready, so users don’t wait too long.

3. Edge Functions – Pages can be served from servers close to the user, making it even faster worldwide.

4. Flexible Data Fetching – You choose: fetch fresh every time, cache for a while, or prebuild entirely.

That’s why many modern apps are shifting to Next.js for rendering.

📖 Real-Life Examples

• News Websites (SSR)
  News must always be fresh. If you publish at 8:00 AM, readers shouldn’t see yesterday’s story. SSR ensures they always get the latest.

• Shopping Sites (ISR/SSR mix)
  A product catalog can be prebuilt with ISR. But the checkout page, showing your specific cart, uses SSR or CSR.

• Dashboards (CSR)
  These don’t need Google to index them. They’re private and user-specific. CSR works best here.

⚡ The Future of Rendering

The web is moving toward hybrid rendering. That means one site can mix CSR, SSR, and SSG all together. With Next.js 13+ (App Router), this has become easier than ever.

Think of it like school:

• You do some homework at home (CSR).

• Some lessons are taught live by the teacher (SSR).

• And some materials are given as printed handouts (SSG).

Different tasks, different methods—but all working together to make learning (or in our case, browsing) smoother.

✅ Conclusion

At the end of the day, rendering is about who does the heavy lifting—your computer or the server.

• React (CSR) → your computer does it all, but you wait more at first.

• Next.js (SSR) → the server does it for you, so you see content faster.

• SSG/ISR → meals are pre-cooked and served lightning fast.

The beauty of Next.js is that you don’t have to pick just one. You can mix and match depending on what each page of your site needs.

So the next time you open a website and see content appear instantly, you’ll know: the server probably did the hard work first.