Proper caching headers dramatically improve performance. This guide covers HTTP caching mechanisms.
Cache-Control Directives#
Common Directives#
Cache-Control: public # Cacheable by anyone
Cache-Control: private # Only browser can cache
Cache-Control: no-cache # Must revalidate
Cache-Control: no-store # Never cache
Cache-Control: max-age=3600 # Cache for 1 hour
Cache-Control: s-maxage=86400 # CDN cache for 1 day
Cache-Control: stale-while-revalidate=60 # Serve stale while refreshing
Cache-Control: immutable # Never changes
Combined Directives#
Loading code block...
ETags for Validation#
Loading code block...
Last-Modified#
Loading code block...
Vary Header#
Loading code block...
Next.js Caching#
Loading code block...
Common Patterns#
Static Assets#
Loading code block...
HTML Pages#
Loading code block...
API Responses#
Loading code block...
Debugging#
Loading code block...
Set appropriate TTLs, use ETags for validation, and leverage stale-while-revalidate for better UX.