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 withCache-Control: public, max-age=31536000, immutablebecause 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
immutableheaders for infinite browser caching. - Dynamic SSG/ISR pages use
stale-while-revalidateto decouple CDN delivery from origin rendering delays.
Knowledge Check
Why do JS/CSS assets inside /_next/static/ safely include the immutable Cache-Control directive?