Next.js Static Site Generation in 2026: ISR, generateStaticParams

Next.js Static Site Generation in 2026: ISR, generateStaticParams, and On-Demand Revalidation

Quick answer. Next.js App Router keeps static pages fresh three ways: time-based ISR via revalidate, on-demand revalidatePath/revalidateTag for instant cache invalidation, and Partial Prerendering that mixes static and dynamic in one page. Use generateStaticParams to pre-render dynamic routes at build time for sub-100ms TTFB.

Static generation delivers pre-rendered HTML from CDN edge servers — sub-100ms TTFB, no database queries on each request, and infinite scalability at low cost. The challenge is keeping that static content fresh. Next.js App Router handles this through three mechanisms: time-based ISR (revalidate), on-demand revalidation (revalidatePath/revalidateTag), and Partial Prerendering (PPR) that mixes static and dynamic in the same page.

This post covers all three patterns: when to use each, generateStaticParams for pre-rendering dynamic routes, cache tagging for granular invalidation, and the ISR stale-while-revalidate behavior that trips up most teams.

---

The Three Rendering Modes

// Static (SSG): generated once at build time, never refreshes
// Use for: marketing pages, docs, blog posts (manually revalidated)
export const dynamic = "force-static";

// ISR: static + auto-refresh on a schedule
// Use for: product listings, news feeds, dashboards
export const revalidate = 3600; // Regenerate at most once per hour

// Dynamic: server-rendered on every request
// Use for: user dashboards, real-time data, auth-dependent pages
export const dynamic = "force-dynamic";

---

generateStaticParams: Pre-Rendering Dynamic Routes

// app/blog/[slug]/page.tsx

// This tells Next.js which [slug] values to pre-render at build time
export async function generateStaticParams() {
  const posts = await db.blogPost.findMany({
    where: { status: "published" },
    select: { slug: true },
    orderBy: { publishedAt: "desc" },
    take: 200, // Pre-render latest 200 posts; others render on-demand
  });

  return posts.map((post) => ({ slug: post.slug }));
}

// ISR: pages not in generateStaticParams are rendered on first request
// and then cached according to revalidate
export const revalidate = 3600; // Cache for 1 hour

// If a slug not in generateStaticParams is requested:
// - first request: render and cache
// - subsequent requests (within 1h): serve from cache
// - after 1h: serve stale, regenerate in background
export const dynamicParams = true; // Allow on-demand rendering (default)
// Set to false to 404 for slugs not in generateStaticParams

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await db.blogPost.findUnique({
    where: { slug, status: "published" },
  });

  if (!post) notFound();
  return <BlogPost post={post} />;
}

// OpenGraph image (also statically generated)
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await db.blogPost.findUnique({
    where: { slug },
    select: { title: true, excerpt: true, image: true },
  });

  return {
    title: post?.title,
    description: post?.excerpt,
    openGraph: {
      title: post?.title,
      description: post?.excerpt,
      images: [{ url: post?.image ?? "/og-default.jpg" }],
    },
  };
}

---

ISR: Stale-While-Revalidate Behavior

// app/products/page.tsx
// ISR with 60-second revalidation

export const revalidate = 60; // Revalidate at most every 60 seconds

export default async function ProductsPage() {
  // This fetch is cached by Next.js for 60 seconds
  const products = await db.product.findMany({
    where: { active: true },
    orderBy: { sortOrder: "asc" },
  });

  return <ProductGrid products={products} />;
}

ISR timeline (important to understand):

T=0s:   First request → render & cache
T=30s:  Request → serve cached (fast, from CDN)
T=60s:  Revalidate period expires
T=61s:  Request → serve STALE (still fast) + trigger background regeneration
T=62s:  Background regeneration completes → cache updated
T=63s:  Request → serve fresh content

The key: after revalidation, the next request sees stale content while the background re-render happens. The request after that sees fresh content. This is intentional — it avoids making users wait for regeneration.

---

Cache Tags: Granular Invalidation

Tags let you invalidate multiple pages that share the same data:

// app/products/[id]/page.tsx
import { unstable_cache } from "next/cache";

// Tag this fetch with "products" and specific product ID
const getProduct = unstable_cache(
  async (id: string) => {
    return db.product.findUnique({ where: { id } });
  },
  ["product-detail"],           // Cache key prefix
  {
    tags: ["products", `product-${id}`],  // Tags for invalidation
    revalidate: 3600,
  }
);

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  if (!product) notFound();
  return <ProductDetail product={product} />;
}

// app/products/page.tsx (listing page — also tagged)
import { unstable_cache } from "next/cache";

const getProducts = unstable_cache(
  async () => db.product.findMany({ where: { active: true } }),
  ["product-list"],
  { tags: ["products"], revalidate: 3600 }
);

export default async function ProductsPage() {
  const products = await getProducts();
  return <ProductGrid products={products} />;
}

// app/actions/products.ts — on-demand revalidation after update
"use server";

import { revalidateTag, revalidatePath } from "next/cache";

export async function updateProduct(productId: string, data: ProductUpdateInput) {
  await db.product.update({ where: { id: productId }, data });

  // Invalidate all pages tagged with this product OR the products collection
  revalidateTag(`product-${productId}`); // → re-renders /products/[id] page
  revalidateTag("products");             // → re-renders /products listing

  // Alternatively, invalidate by path:
  // revalidatePath(`/products/${productId}`);
  // revalidatePath("/products", "page");
}

---

On-Demand Revalidation API Route

For webhooks (e.g., CMS publishes content → trigger revalidation):

// app/api/revalidate/route.ts
import { NextRequest, NextResponse } from "next/server";
import { revalidatePath, revalidateTag } from "next/cache";

export async function POST(req: NextRequest) {
  // Verify the request is from your CMS/webhook source
  const secret = req.headers.get("x-revalidate-secret");
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ error: "Invalid secret" }, { status: 401 });
  }

  const body = await req.json();
  const { type, slug, tag } = body;

  try {
    if (tag) {
      // Invalidate by tag (most efficient — only revalidates tagged pages)
      revalidateTag(tag);
      return NextResponse.json({ revalidated: true, tag });
    }

    if (type === "blog-post" && slug) {
      revalidatePath(`/blog/${slug}`);
      revalidatePath("/blog");       // Invalidate listing too
      return NextResponse.json({ revalidated: true, path: `/blog/${slug}` });
    }

    if (type === "all") {
      revalidatePath("/", "layout"); // Revalidate entire site
      return NextResponse.json({ revalidated: true, scope: "all" });
    }

    return NextResponse.json({ error: "Unknown type" }, { status: 400 });
  } catch (err) {
    return NextResponse.json({ error: "Revalidation failed" }, { status: 500 });
  }
}

## Trigger from CMS webhook or CI/CD:
curl -X POST https://yourdomain.com/api/revalidate \
  -H "Content-Type: application/json" \
  -H "x-revalidate-secret: your-secret" \
  -d '{"type": "blog-post", "slug": "nextjs-image-optimization"}'

---

Partial Prerendering (PPR)

PPR (stable in Next.js 15) renders a static shell at build time and streams dynamic parts at request time — no loading.tsx flicker:

// next.config.ts
const config: NextConfig = {
  experimental: {
    ppr: true,        // Enable PPR
  },
};

// app/products/[id]/page.tsx
import { Suspense } from "react";

// The product shell (title, image, description) is static
// The "In stock" indicator and recommendations are dynamic
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  // This is fetched at build time (static part)
  const product = await db.product.findUnique({
    where: { id },
    select: { id: true, name: true, description: true, image: true, price: true },
  });

  if (!product) notFound();

  return (
    <div>
      {/* Static shell — pre-rendered, served instantly */}
      <ProductHeader product={product} />
      <ProductDescription text={product.description} />

      {/* Dynamic parts — streamed after static shell */}
      <Suspense fallback={<StockSkeleton />}>
        <StockIndicator productId={id} />
      </Suspense>

      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations productId={id} />
      </Suspense>
    </div>
  );
}

// StockIndicator reads live inventory — opt into dynamic
async function StockIndicator({ productId }: { productId: string }) {
  const stock = await db.inventory.findUnique({ where: { productId } });
  return <StockBadge count={stock?.available ?? 0} />;
}

---

Caching Comparison Table

---

Cost and Timeline

---

More on This Topic

• Next.js App Router Caching — Full cache layer reference
• Next.js Performance Optimization — LCP/INP/CLS alongside ISR
• Next.js Server Components Patterns — RSC data fetching with unstable_cache
• AWS CloudFront Edge — CDN caching + ISR cache headers

---

Inside Viprasol

We architect Next.js caching strategies for high-traffic applications — from simple ISR blog pages through complex PPR product pages with live inventory. Our team has shipped Next.js sites serving millions of static pages with sub-100ms TTFB globally.

What we deliver:

• generateStaticParams configuration for all dynamic routes
• ISR revalidate period tuning per content type
• Cache tag taxonomy for granular on-demand invalidation
• Revalidation webhook for CMS integration (Contentful, Sanity, Strapi)
• PPR implementation for pages with mixed static/dynamic content

Explore our web development services or contact us to optimize your Next.js caching strategy.

Next.js App Router Static Generation with generateStaticParams and revalidate: What the Docs Cover

If you are reading the Next.js App Router static generation generateStaticParams revalidate docs and still feel unsure where each piece fits, here is the practical mental model. The generateStaticParams function tells Next.js which dynamic route segments to prerender at build time, replacing the old getStaticPaths. Pair it with the route segment revalidate option to control Incremental Static Regeneration, so pages rebuild in the background after the interval you set. Together they cover what the Next.js App Router static rendering generateStaticParams revalidate docs describe as hybrid rendering: fully static HTML at build, refreshed on demand.

In practice, set revalidate per route, return only the params you genuinely want prerendered, and let dynamicParams handle the rest on first request. At Viprasol Tech, our senior engineers own these rendering decisions end to end, balancing build time, cache freshness, and infrastructure cost for each project.