🧠 Rendering Paradigms in Next.js: SSR vs CSR Explained

One of the superpowers of Next.js is its flexibility when it comes to rendering strategies. Whether you're building a blazing-fast landing page, a dashboard, or a blog, Next.js lets you pick the best rendering method for the job.

In this post, we'll explore:

• What SSR and CSR mean

• How Next.js handles them

• Their real-world use cases

• And how it all works under the hood

Let’s dive in 🚀

---

📜 What is Rendering?

Rendering is the process of converting code (HTML, JS, CSS) into a visual page that users interact with.

In modern web development, there are multiple ways to render content:

• At build time (SSG)

• On the server (SSR)

• In the browser (CSR)

• Or a mix of these (ISR, Hybrid Rendering)

Here, we focus on SSR and CSR — two major strategies in dynamic apps.

---

🌐 1. Server-Side Rendering (SSR)

What is SSR?

SSR means the HTML for a page is generated on the server for every request. It’s then sent to the browser for display.

In Next.js, you enable SSR using the getServerSideProps() function.

Example:

tsxCopyEditexport async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();

  return {
    props: { data },
  };
}

This renders the page on the server at request time—perfect for dynamic content or personalized user pages.

---

🔍 How SSR Works Under the Hood

1. User sends a request to /posts.

2. The server executes getServerSideProps() to fetch data.

3. HTML is generated with data pre-filled.

4. HTML is sent to the browser and shown immediately.

5. React hydrates the page, enabling interactivity.

---

✅ When to Use SSR?

• Content changes on every request

• Requires user-specific data (e.g., dashboards)

• Needs real-time freshness (e.g., stock prices, bookings)

• SEO matters for dynamic data

---

🧭 2. Client-Side Rendering (CSR)

What is CSR?

With CSR, the server sends a minimal HTML shell, and all rendering happens in the browser using JavaScript.

This is the default behavior of traditional React apps.

In Next.js, you trigger CSR when using useEffect() to fetch data after the component mounts.

Example:

tsxCopyEditimport { useEffect, useState } from 'react';

function Posts() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/posts')
      .then(res => res.json())
      .then(setData);
  }, []);

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

---

🔍 How CSR Works Under the Hood

1. User requests the page.

2. Server sends static HTML with no data.

3. JavaScript loads in browser.

4. React executes useEffect() and fetches data.

5. DOM is updated with new content.

---

✅ When to Use CSR?

• Data doesn’t affect SEO

• Content is user-interactive or personalized (e.g., chat apps)

• Faster initial HTML isn't a priority

• You want full control in the frontend

---

🔀 SSR vs CSR: A Quick Comparison

---

🎯 Hybrid Rendering in Next.js

Next.js lets you combine SSR and CSR in a single project:

• Use getServerSideProps or getStaticProps for SSR/SSG

• Use useEffect for client-only data

This flexibility is what makes Next.js so powerful.

---

🏁 Conclusion

Both SSR and CSR have their strengths—and the right choice depends on your app's needs.

• ✅ Use SSR when SEO, data freshness, and TTFB matter.

• ✅ Use CSR for client-heavy UIs and apps with real-time interactions.

Next.js empowers you to use both in the same app so you get the best of both worlds.