When to Use SSR, SSG, or ISR in Next.js (And How to Decide)

If you’ve ever stared at a Next.js page and wondered, “Should this be server-side rendered? Or static? Or… wait, what is ISR again?” you’re not alone.

Choosing the right rendering strategy is one of the most practical decisions you’ll make in a Next.js app. And getting it right can mean the difference between lightning-fast performance and a sluggish user experience.

In this chapter, we’ll break it down so you know exactly when to use SSR, SSG, or ISR.

The Big Three

Rendering Mode	When It Happens	Typical Use Cases
SSR (Server-Side Rendering)	On every request	User-specific pages, real-time data
SSG (Static Site Generation)	At build time	Blog posts, marketing pages, docs
ISR (Incremental Static Regeneration)	Static + periodic update	News sites, e-commerce catalogs

Server-Side Rendering (SSR)

How:

export async function getServerSideProps(context) {
  // context contains params, query, req, res, etc.
  const data = await fetchLiveData();
  return { props: { data } };
}

Pros:

• Latest data always served
• Great for user-specific content (dashboards, profiles)

Cons:

• Slower TTFB (needs to run server logic every time)
• Higher server load

Use For:

• Authenticated dashboards
• Real-time data feeds
• Personalized content

Static Site Generation (SSG)

How:

export async function getStaticProps() {
  const data = await fetchPosts();
  return { props: { data } };
}

Pros:

• Fastest performance (fully static HTML)
• Zero server cost after build
• Great SEO

Cons:

• Data is “frozen” at build time unless re-built
• Not great for highly dynamic pages

Use For:

• Marketing pages
• Blog articles
• Documentation
• Landing pages

Incremental Static Regeneration (ISR)

How:

export async function getStaticProps() {
  const data = await fetchCatalog();
  return {
    props: { data },
    revalidate: 60, // revalidate every 60 seconds
  };
}

Pros:

• Best of both worlds: fast + fresh
• CDN cached static page that updates on demand
• Great for e-commerce and news

Cons:

• Slight complexity in cache handling
• First visitor after expiration triggers re-generation

Use For:

• E-commerce product listings
• News articles
• Dynamic catalogs
• Frequently updated content

Decision Flow

Is the content user-specific? → Use SSR
Is the content public and stable? → Use SSG
Is the content public but frequently updated? → Use ISR

In the App Router (app/ directory)

• Server Components can often replace traditional SSR/SSG logic
• You can combine RSC with:
  • fetch('https://api...') directly in components
  • revalidate tag for ISR:

// ISR in app/page.tsx file (not inside component)
export const revalidate = 60;

Summary

Content Type	Best Rendering
User profile page	SSR
Marketing homepage	SSG
Blog article	SSG or ISR
News feed	ISR
Admin dashboard	SSR

There’s no one-size-fits-all answer when it comes to rendering in Next.js, and that’s the point. Modern apps are hybrid by design. The key is knowing which tool to pick for each page, so you can balance performance, scalability, and user experience.

Next up: How to Use getServerSideProps with an External API

In the next chapter, we’ll take a closer look at getServerSideProps — and how to use it effectively when your data lives in an external API. We’ll cover common patterns and a few pitfalls to avoid.