SSR vs SSG vs ISR in Next.js: Key Differences and Usage

SSR (Server-Side Rendering) generates pages on each request, SSG (Static Site Generation) builds pages at build time, and ISR (Incremental Static Regeneration) updates static pages after build on demand. Each method balances freshness and performance differently in Next.js.

Quick Comparison

Here is a quick overview comparing SSR, SSG, and ISR in Next.js based on key factors.

Factor	SSR (Server-Side Rendering)	SSG (Static Site Generation)	ISR (Incremental Static Regeneration)
When pages are generated	On every request	At build time	At build time and updated after on demand
Performance	Slower per request due to server work	Fast, served from CDN	Fast with periodic updates
Freshness of data	Always fresh	Static until next build	Mostly fresh with background updates
Use case	Dynamic content needing real-time data	Static content with rare updates	Static content needing occasional updates
Caching	No caching by default	Cached globally on CDN	Cached and revalidated after set time
Complexity	Requires server resources	Simple hosting, no server needed	Requires server for regeneration

Key Differences

SSR renders the page on the server for every user request. This means the server runs code each time someone visits, so the data is always up to date but slower to respond. It is great for pages that change often or need user-specific data.

SSG builds the page once during the build process. The page is then served as a static file from a CDN, making it very fast. However, the content stays the same until you rebuild the site, so it suits mostly static content.

ISR combines both approaches. It builds pages statically at first, but then updates them in the background after a set time or on demand. This keeps pages fast and mostly fresh without rebuilding the whole site. It is useful when you want static speed but need to update content regularly.

Code Comparison

javascript

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: {data.value}</div>;
}

Output

Data: (value from API on each request)

SSG Equivalent

javascript

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: {data.value}</div>;
}

Output

Data: (value from API at build time)

When to Use Which

Choose SSR when your page needs fresh data on every request, like user dashboards or frequently changing content. Choose SSG for mostly static pages like blogs or marketing sites where content rarely changes, to get fast load times. Choose ISR when you want static speed but need to update content regularly without rebuilding the whole site, such as product listings or news feeds.

Key Takeaways

SSR generates pages on every request for always fresh data but slower response.

SSG builds pages once at build time for fast static delivery but stale data until rebuild.

ISR updates static pages after build on demand, balancing speed and freshness.

Use SSR for dynamic, user-specific content; SSG for static content; ISR for mostly static with updates.

Next.js makes switching between these methods easy with specific data fetching functions.