Q61: How does Next.js handle HTTP Cache-Control headers for static vs dynamic assets at the CDN layer?

Next.js manages CDN caching behavior via tailored Cache-Control headers:

  • Static Assets (/_next/static/...): Served with Cache-Control: public, max-age=31536000, immutable because file names include content hashes.
  • Dynamic / Revalidated Pages: Served with s-maxage=3600, stale-while-revalidate=59, instructing CDNs to serve stale content while asynchronously fetching updated pages from origin in the background.
Key Takeaways
  • Hashed static assets use immutable headers for infinite browser caching.
  • Dynamic SSG/ISR pages use stale-while-revalidate to decouple CDN delivery from origin rendering delays.
Knowledge Check

Why do JS/CSS assets inside /_next/static/ safely include the immutable Cache-Control directive?