Server-Side Rendering (SSR) vs. Static Site Generation (SSG) vs. Client-Side Rendering (CSR) in Next.js

Johnkd — Wed, 02 Apr 2025 14:31:36 +0000

Introduction

When developing applications with Next.js, one of the fundamental decisions developers face is choosing the right rendering strategy. The framework provides multiple data-fetching methods, including Server-Side Rendering (SSR), Static Site Generation (SSG), and Client-Side Rendering (CSR), each suited for different scenarios.

This article delves deeply into the differences between SSR, SSG, and CSR, exploring their advantages, trade-offs, and practical applications. Additionally, we will examine Incremental Static Regeneration (ISR), which blends the benefits of both SSR and SSG.

Server-Side Rendering (SSR)

How It Works

With Server-Side Rendering (SSR), Next.js dynamically generates the page's HTML on each request. When a user accesses a page, the server retrieves necessary data, renders the page, and then sends the fully rendered HTML to the client.

This approach is useful for pages requiring dynamic content or personalization since each request fetches the most up-to-date data.

Implementation Example

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

  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.message}</div>;
}

Use Cases for SSR

Frequent Data Updates: Content that changes often, such as live scores, stock prices, or news feeds.
User-Specific Content: Personalized dashboards or pages requiring authentication.
SEO-Optimized Pages with Dynamic Data: Pages that should be indexable but rely on frequently changing data.

Drawbacks of SSR

Performance Overhead: Since the page is rendered at request time, it can introduce latency, especially under heavy traffic.
Increased Server Load: Each request triggers a full data-fetch and rendering cycle, leading to higher server resource consumption.

Static Site Generation (SSG)

How It Works

With Static Site Generation (SSG), Next.js pre-renders pages at build time. The generated HTML files are then stored and served directly from a CDN, leading to extremely fast page loads.

Implementation Example

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

  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.message}</div>;
}

Use Cases for SSG

Content That Rarely Changes: Blogs, documentation, and marketing pages where data is not frequently updated.
High-Performance Websites: Since pages are served statically, load times are near-instantaneous.
SEO-Optimized Pages with Static Content: Pre-rendered pages ensure search engines can index them efficiently.

Drawbacks of SSG

Stale Data Issue: If the underlying data changes, the page remains outdated until a new build is triggered.
Limited Personalization: Since pages are pre-generated, user-specific content is difficult to implement without client-side fetching.

Client-Side Rendering (CSR)

How It Works

With Client-Side Rendering (CSR), the initial HTML is minimal and JavaScript is used to fetch and render data dynamically after the page loads in the browser.

Implementation Example

import { useEffect, useState } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>;
  return <div>{data.message}</div>;
}

Use Cases for CSR

Highly Interactive Applications: SPAs (Single Page Applications) like dashboards, social media feeds, and e-commerce platforms.
User-Specific Content: Pages that rely heavily on authentication and personalized data.
Fast Initial Load with Lazy Loading: Applications that can progressively load data after the first render.

Drawbacks of CSR

SEO Challenges: Since content is loaded via JavaScript, search engine crawlers may struggle to index pages effectively.
Increased Load Time: Users may experience a delay in content rendering as data is fetched on the client side.

Key Differences: SSR vs. SSG vs. CSR

Feature	SSR (Server-Side Rendering)	SSG (Static Site Generation)	CSR (Client-Side Rendering)
When HTML is Generated	On each request	At build time	On client-side after page load
Performance	Slower due to real-time rendering	Extremely fast, served from CDN	Fast initial load, but data fetching adds delay
Data Freshness	Always up-to-date	Can become outdated	Always fresh but requires extra load time
Server Load	High, each request triggers rendering	Low, as pages are pre-generated	Minimal server load
SEO Benefits	Strong, as content is fresh	Strong, as content is pre-rendered	Weaker SEO, depends on hydration

Incremental Static Regeneration (ISR) – A Hybrid Approach

To overcome the limitations of SSG while maintaining high performance, Next.js introduced Incremental Static Regeneration (ISR). ISR allows pages to be pre-generated but updated on demand without requiring a full rebuild.

Implementation Example

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

  return { props: { data }, revalidate: 60 };
}

Benefits of ISR

Optimized Performance: Delivers static-like speed while allowing for dynamic updates.
Reduced Server Load: Unlike SSR, ISR does not require rendering on every request.
SEO and Fresh Data: Maintains SEO advantages while keeping content updated.

Choosing the Right Rendering Method

Scenario	Recommended Approach
Content updates frequently (real-time)	SSR
Content changes rarely (e.g., blogs)	SSG
Need performance but also fresh content	ISR
Personalized user data (e.g., dashboards)	SSR or CSR
Maximum scalability with minimal backend load	SSG
Highly interactive SPA-like experience	CSR

Conclusion

Choosing between SSR, SSG, CSR, and ISR depends on the specific needs of your application:

Use SSR for real-time updates and SEO.
Use SSG for high-performance, static content.
Use CSR for highly interactive, client-heavy applications.
Use ISR for static content that needs occasional updates.

Next.js provides a robust ecosystem allowing developers to mix and match these techniques to optimize user experience and application performance.

DEV Community: Johnkd

Server-Side Rendering (SSR) vs. Static Site Generation (SSG) vs. Client-Side Rendering (CSR) in Next.js

Introduction

Server-Side Rendering (SSR)

How It Works

Implementation Example

Use Cases for SSR

Drawbacks of SSR

Static Site Generation (SSG)

How It Works

Implementation Example

Use Cases for SSG

Drawbacks of SSG

Client-Side Rendering (CSR)

How It Works

Implementation Example

Use Cases for CSR

Drawbacks of CSR

Key Differences: SSR vs. SSG vs. CSR

Incremental Static Regeneration (ISR) – A Hybrid Approach

Implementation Example

Benefits of ISR

Choosing the Right Rendering Method

Conclusion