How to Control Caching in Nginx

When serving web content, caching can significantly impact performance and user experience. Properly configuring cache settings in Nginx ensures that browsers and proxies handle your site’s assets the way you intend. Whether you want to maximize caching for efficiency or disable it entirely for real-time updates, this guide will walk you through the process.

Why Manage Cache in Nginx?

Caching helps browsers and proxy servers store resources like images, JavaScript, and CSS files to avoid redundant requests, speeding up page loads. However, sometimes you need to disable cache to ensure users always see the latest content. Understanding how to configure cache control headers in Nginx is crucial for optimizing your website.

Setting Cache-Control Headers in Nginx

Nginx allows you to set cache-related headers globally or per file type. These headers define how long a browser or proxy should keep a file before requesting a fresh version.

Allowing Caching for Static Files

If you want browsers to cache assets like images, stylesheets, and scripts for faster page loads, use the following configuration:

server {
    root /var/www/yourdomain.com/html;
    index index.html;

    server_name yourdomain.com www.yourdomain.com;

    location / {
        try_files $uri $uri/ =404;
    }

    # Enable caching for static files
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2?|ttf|svg|eot|mp4|webm|ogg|avi|pdf|zip|webp)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000, immutable";
    }
}

Disabling Cache for Dynamic Content

For pages that require frequent updates (like HTML or API responses), disable caching:

location ~* \.(html|htm|json|xml)$ {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

Completely Disabling Cache

To ensure that no file is cached at all, apply these headers globally:

location / {
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

Testing Your Cache Headers

After making changes to your Nginx configuration, restart the server:

sudo systemctl restart nginx

To verify that caching is working correctly, check the response headers in your browser:

In Google Chrome / Edge:

1. Open Developer Tools (F12 or Ctrl + Shift + I on Windows, Cmd + Option + I on Mac).
2. Go to the Network tab.
3. Reload the page.
4. Click on any file (e.g., CSS, JS, or HTML).
5. In the Headers tab, find Cache-Control under Response Headers.

✅ If caching is enabled, you should see:

Cache-Control: public, max-age=2592000, immutable

❌ If caching is disabled, you should see:

Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0

Common Issues & Fixes

1. Changes Not Taking Effect

If you still see cached versions of your site, try:

• Restarting Nginx: sudo systemctl restart nginx
• Testing your configuration: sudo nginx -t
• Clearing your browser cache (Ctrl + Shift + R or Cmd + Shift + R)

2. CDN or Proxy Overriding Cache Headers

If you use Cloudflare, AWS CloudFront, or another proxy service, ensure that caching rules are set correctly in their control panel.

Conclusion

Managing cache in Nginx is essential for balancing performance and content freshness. Whether you need aggressive caching for static files or real-time updates for dynamic pages, configuring the right headers ensures your site functions as expected.

By following this guide, you can optimize cache behavior to suit your needs while ensuring users receive the best experience possible.