Caching HTML Pages with Cache-Control

HTML Page Caching Strategies

HTML pages are trickier to cache than static assets because they often contain dynamic content, personalized elements, or time-sensitive information. The right strategy depends on how frequently the content changes and whether it varies per user.

Fully Static Pages

Cache-Control: public, max-age=3600, s-maxage=86400

Example: Landing pages, about pages, documentation

• Browser caches for 1 hour
• CDN caches for 24 hours (purge on deploy)

ISR / On-Demand Revalidation

Cache-Control: public, max-age=0, s-maxage=3600, stale-while-revalidate=86400

Example: Blog posts, product pages, category pages

• Browser always revalidates (max-age=0)
• CDN serves cached version for 1 hour
• Background revalidation for up to 24 hours
• New content appears within seconds after publishing

Personalized Pages

Cache-Control: private, no-cache

Example: Dashboard, user profile, account settings

• Only the browser caches
• Must revalidate on every request
• Use ETag for efficient conditional requests

E-commerce Product Pages

Cache-Control: public, max-age=0, s-maxage=300, stale-while-revalidate=60, stale-if-error=3600

• Always fresh from browser's perspective
• CDN caches for 5 minutes with 1-minute SWR
• Serves stale content for 1 hour during outages

Edge-Side Includes (ESI)

For pages that are mostly static but have small dynamic sections (e.g., a logged-in username in the header), consider Edge-Side Includes. The static shell is cached aggressively, while dynamic fragments are fetched on each request.