How do you avoid build-time data staleness in SSG?

Question

Accepted Answer

Build-time data staleness is an inherent challenge with Static Site Generation (SSG)—pages are generated at build time and remain fixed until the next build. As your content changes in your CMS, database, or API, users may see outdated information. Next.js provides several strategies to combat this staleness without sacrificing the performance benefits of static generation: Incremental Static Regeneration (ISR), on-demand revalidation, client-side data fetching for dynamic portions, and hybrid architectures that combine static shells with live data updates. **Incremental Static Regeneration (ISR):** Set a `revalidate` time (e.g., 60 seconds) to automatically regenerate pages in the background when content becomes stale . **On-Demand Revalidation:** Trigger immediate cache invalidation via `revalidatePath` or `revalidateTag` when content actually changes (e.g., via CMS webhooks) . **Client-side data fetching:** Fetch real-time data in browser after the static page loads, keeping the static shell fast while ensuring fresh content . **Hybrid approach:** Use SSG for stable content (product descriptions, blog posts) and client-side fetching for dynamic elements (inventory, comments, prices) . **Time-based rebuilds:** For simple sites, schedule periodic rebuilds (e.g., every hour via cron jobs) to refresh content, though this is less efficient than ISR . // app/products/[id]/page.tsx // ISR with time-based revalidation - automatic background updates // Revalidate every 60 seconds (stale-while-revalidate pattern) export const revalidate = 60; // Allow on-demand generation for paths not pre-rendered export const dynamicParams = true; export async function generateStaticParams() { // Pre-render only popular products at build time const popularProducts = await fetch('https://api.example.com/products?popular=true') .then(res => res.json()); return popularProducts.map((product) => ({ id: product.id.toString(), })); } export default async function ProductPage({ params }: { params: { id: string } }) { // This fetch uses the same revalidate window const product = await fetch(`https://api.example.com/products/${params.id}`, { next: { revalidate: 60 } }).then(res => res.json()); // If product doesn't exist, return 404 if (!product) { return notFound(); } return (

{product.name}

Price: ${product.price}

Last updated: {new Date(product.updatedAt).toLocaleString()}

{product.description}

); } // Benefits: // ✓ Automatically updates without rebuilds // ✓ Users see fresh content within revalidate window // ✗ Stale window exists (up to revalidate seconds) // app/products/[id]/page.tsx // Use tags for targeted revalidation export default async function ProductPage({ params }: { params: { id: string } }) { const product = await fetch(`https://api.example.com/products/${params.id}`, { next: { tags: [`product-${params.id}`, 'all-products'], revalidate: 3600 // Fallback time-based revalidate } }).then(res => res.json()); return ; } // app/api/revalidate/route.ts - CMS webhook handler import { revalidateTag, revalidatePath } from 'next/cache'; import { NextRequest } from 'next/server'; export async function POST(request: NextRequest) { // Verify webhook secret const authHeader = request.headers.get('authorization'); if (authHeader !== `Bearer ${process.env.CMS_WEBHOOK_SECRET}`) { return Response.json({ error: 'Unauthorized' }, { status: 401 }); } const { productId, action } = await request.json(); try { // Invalidate by tag - affects all pages using this data await revalidateTag(`product-${productId}`); await revalidateTag('all-products'); // Also invalidate specific paths await revalidatePath(`/products/${productId}`); await revalidatePath('/products'); // If product category changed, update category pages too if (action === 'categoryChanged') { await revalidatePath('/categories'); } return Response.json({ revalidated: true, timestamp: Date.now() }); } catch (error) { return Response.json({ error: 'Revalidation failed' }, { status: 500 }); } } // CMS setup (example: Contentful webhook) // When editor publishes product update, CMS sends POST to /api/revalidate // Product page updates instantly - no staleness window! For highly dynamic data that changes frequently (like inventory levels, live comments, or user-specific content), the best approach is often to serve a **static shell** and fetch the dynamic data on the client. This gives you the performance benefits of SSG for the static content while ensuring users always see fresh data for the dynamic parts. The pattern is especially effective when combined with WebSockets or Server-Sent Events for real-time updates . // app/products/[id]/page.tsx - Static shell with client-side dynami

How do you avoid build-time data staleness in SSG?

Avoid build-time data staleness in SSG by using ISR for background updates, implementing on-demand revalidation via webhooks, leveraging client-side data fetching for dynamic content, and adopting hybrid rendering strategies

How do you avoid build-time data staleness in SSG?

Avoid build-time data staleness in SSG by using ISR for background updates, implementing on-demand revalidation via webhooks, leveraging client-side data fetching for dynamic content, and adopting hybrid rendering strategies

Scenario Questions

Follow-up Questions