Understanding SSR, SSG, and ISR

Next.js is famous for support of multiple rendering modes. Depending on how you configure caching and data fetching, you can serve pages statically, render them dynamic-on-demand, or update static assets in the background.

1. Static Site Generation (SSG)

In Static Site Generation, Next.js pre-renders page HTML at build time. When a user visits the website, the server delivers the pre-built HTML file instantly from a CDN cache.

• Best For: Blogs, documentation panels, marketing landing pages, and marketing websites where content rarely changes.
• Benefits: Ultra-fast page loading times and low server hosting costs.

// Next.js static build configuration example (default behavior)
export default async function StaticPage() {
  // Fetches static data at build time
  const res = await fetch("https://api.example.com/products");
  const data = await res.json();

  return (
    <div>
      {data.map((p) => (
        <p key={p.id}>{p.name}</p>
      ))}
    </div>
  );
}

2. Server-Side Rendering (SSR)

In Server-Side Rendering (also called Dynamic Rendering), Next.js renders the HTML on the server on every incoming request. The page is constructed dynamically before traveling to the client.

• Best For: Real-time user dashboards, search result catalogs, and pages containing private user data that cannot be cached publicly.
• Benefits: Displays up-to-the-second live data.

// Force SSR by disabling caching
export default async function DynamicPage() {
  const res = await fetch("https://api.example.com/live-stock", {
    cache: "no-store" // Disables static caching, forcing fetch on every request
  });
  const stock = await res.json();

  return <p>Live Stock: {stock.value}</p>;
}

3. Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a hybrid approach. It allows you to update static pages in the background without rebuilding the entire website.

When you configure a page with a revalidate interval:

1. Initial Phase: Visitors receive the cached, pre-built static page.
2. Revalidation Triggers: After the time limit (for example, 60 seconds) expires, the next visit still serves the old page but triggers a background rebuild of that page.
3. Background Build: Next.js regenerates the page. If successful, it updates the cache to serve the new version for subsequent visitors.

• Best For: Large e-commerce catalogs or news sites where content changes periodically but page load performance must remain high.

// Enable ISR by passing a revalidate interval
export default async function CatalogPage() {
  const res = await fetch("https://api.example.com/products", {
    next: { revalidate: 60 } // Rebuild this static page at most once every 60 seconds
  });
  const data = await res.json();

  return <p>Catalog Items Count: {data.length}</p>;
}