Unlock Nginx’s Full Power: Static/Dynamic Separation & Advanced Caching Guide

Overview of Static/Dynamic Separation and Caching

Nginx can dramatically improve high‑concurrency website performance by separating static resources from dynamic requests and applying layered caching strategies. Proper configuration reduces backend load by up to 60%, raises static‑resource cache hit rates above 80%, and cuts transmission volume by 70%.

Static/Dynamic Separation Architecture

Core Concept

Static files (images, CSS, JS, etc.) are served directly by Nginx, while dynamic content is proxied to an application server such as Tomcat or Spring Boot.

Typical Configuration Example

upstream tomcat_server {
    server 192.168.8.23:8099;
}
server {
    listen 80;
    server_name localhost;
    # Static resources
    location ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js|woff2|ico)$ {
        root /var/www/static;
        expires 30d;
        access_log off;
        add_header Cache-Control "public, immutable";
    }
    # Dynamic requests
    location ~ .*.jsp$ {
        proxy_pass http://tomcat_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location / {
        root html;
        index index.html;
    }
}

Location Matching Priority

=

– exact match (highest priority) ^~ – prefix match (high priority) ~ – case‑sensitive regex (medium) ~* – case‑insensitive regex (medium)

plain prefix (low)

catch‑all / (lowest)

Static/Dynamic Separation in Front‑End‑Back‑End Decoupled Projects

server {
    listen 80;
    server_name app.example.com;
    # Front‑end assets
    location / {
        root /var/www/app/dist;
        try_files $uri $uri/ /index.html;
    }
    # Backend API
    location /api/ {
        proxy_pass http://backend_server;
    }
}

try_files $uri /index.html prevents 404 on page refresh; use hashed filenames (e.g., main.abcdef.js ) to avoid cache staleness.

Deep Cache Configuration

Multi‑Level Cache Structure

http {
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;
    proxy_cache_path /var/cache/static levels=1:2 keys_zone=static_cache:20m max_size=50g inactive=365d;
    proxy_cache_path /var/cache/dynamic levels=1:2 keys_zone=dynamic_cache:10m max_size=1g inactive=10m;
}

Static Resource Cache

location ~* \.(jpg|jpeg|png|gif|css|js|woff2|ico)$ {
    root /var/www/static;
    proxy_cache static_cache;
    proxy_cache_valid 200 302 365d;
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header X-Proxy-Cache $upstream_cache_status;
}

Hash‑based naming (e.g., style.a1b2c3.css ) enables long‑term caching.

Dynamic Content Cache

location /api/ {
    proxy_pass http://backend_server;
    proxy_cache dynamic_cache;
    proxy_cache_key "$scheme$host$request_uri$is_args$args";
    proxy_cache_valid 200 302 5m;
    proxy_cache_lock on;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    if ($http_cookie ~* "sessionid") {
        proxy_no_cache 1;
        proxy_cache_bypass 1;
    }
    add_header X-Proxy-Cache $upstream_cache_status;
}

proxy_cache_lock prevents cache stampede; proxy_cache_use_stale ensures resilience.

Redis + Nginx Multi‑Layer Cache Collaboration

L1 – Browser cache (fastest, no network)

L2 – Nginx proxy_cache (high hit rate for hot APIs)

L3 – Redis (controllable, expirations for business data)

@GetMapping("/article/{id}")
public Article getArticle(@PathVariable Long id) {
    Article article = redisTemplate.opsForValue().get("article:" + id);
    if (article != null) return article;
    article = articleService.findById(id);
    redisTemplate.opsForValue().set("article:" + id, article, Duration.ofMinutes(5));
    return article;
}

Cache Consistency and Invalidation Strategies

Filename versioning – safest method.

Active purge endpoint

curl -X PURGE "https://example.com/article/123.html"

Webhook‑triggered invalidation after CMS update or GitLab release.

Gradual rollout invalidation to avoid cache avalanche.

Performance Monitoring & Log Visualization

location /nginx_status {
    stub_status on;
    allow 127.0.0.1;
    deny all;
}

Combine Prometheus + Grafana to visualize hit rate, QPS, connections, etc. Example log queries:

grep "X-Proxy-Cache: HIT" access.log | wc -l
grep "X-Proxy-Cache: MISS" access.log | wc -l

CDN + Nginx Hybrid Caching Architecture

Client → CDN (nationwide edge cache) → MISS → Nginx (reverse proxy + secondary cache) → MISS → Backend (Tomcat/Spring Boot)

Benefits: 99% static hits at CDN, dynamic API hits at Nginx, near‑zero origin load.

System & Nginx Tuning

Linux Kernel Settings

# /etc/sysctl.conf
net.core.somaxconn = 65535
net.ipv4.tcp_max_syn_backlog = 65535
net.ipv4.tcp_tw_reuse = 1
fs.file-max = 1000000

Nginx Worker Configuration

worker_processes auto;
events {
    worker_connections 65535;
    use epoll;
}

Gzip & HTTP/2

gzip on;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript;

SSL/TLS Optimization

ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

Load Balancing & High Availability

upstream backend_server {
    least_conn;
    server 10.0.0.1:8080 weight=3;
    server 10.0.0.2:8080;
    keepalive 32;
}
server {
    location / {
        proxy_pass http://backend_server;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
}

Performance Test Validation

ab -n 10000 -c 500 http://example.com/

Results show static response time reduced from 250 ms to 45 ms (‑82%), backend CPU usage dropped from 85% to 40% (‑53%), and throughput increased from 1 200 RPS to 5 800 RPS (≈4.8×).

Production Tips

Separate access logs for static and dynamic traffic.

Gradual cache rollout for new versions.

Enable HTTP/2 + Brotli for mobile performance.

Use Nginx cache as origin layer when combined with CDN.

Drive optimizations with real‑time metrics.

Best‑Practice Summary

Static/Dynamic separation is the starting point for performance gains.

Layered caching provides stability and high efficiency.

Continuous monitoring and tuning sustain improvements.

Versioned assets and graceful invalidation keep caches safe.

Final Impact

Static response time ↓ 80%+

Dynamic throughput ↑ 3‑5×

System concurrency ↑ 10×

Backend load ↓ 60%+

Optimization philosophy: eliminate unnecessary computation, avoid duplicate transfers, fully leverage cache layers, and allocate resources wisely. When Nginx evolves beyond a simple reverse proxy, your site truly “takes off.”