How Nginx Static/Dynamic Separation Boosts Web Performance by 3×

Nginx is a core component in large‑scale architectures. This article explains the static‑dynamic separation pattern, which routes static files (HTML, CSS, JavaScript, images, video, etc.) directly from a dedicated static server while forwarding dynamic requests (JSP, PHP, ASP, Tomcat, Spring, Express, Django, and other backend applications) to application servers.

Static resources are served from an independent domain such as static.yourdomain.com, pointing to a specialized Nginx static‑server cluster. Dynamic resources use the primary domain (e.g., www.yourdomain.com) and are handled by Nginx’s reverse‑proxy layer, which forwards them to the backend application cluster.

Key configuration points:

Serve static files directly with root /data/www/static; and enable long‑term caching ( expires 30d;).

Disable access logs for static requests to reduce I/O overhead.

Use a location block matching common static extensions (gif, jpg, png, css, js, woff, woff2, ttf, eot, svg, ico) to serve static content.

Forward all other requests to the backend via proxy_pass http://backend_server_cluster; and preserve original host and client IP headers.

server {
    listen 80;
    server_name yourdomain.com;

    # 1. Static resource handling
    location ~* \.(gif|jpg|jpeg|png|css|js|ico|woff|woff2|ttf|eot|svg)$ {
        root /data/www/static;
        expires 30d;
        access_log off;
    }

    # 2. Dynamic resource handling
    location / {
        proxy_pass http://backend_server_cluster;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # ... other proxy settings ...
    }
}

By separating static and dynamic traffic, Nginx reduces latency, improves cache efficiency, and scales more effectively, often delivering up to three times better performance compared to a monolithic setup.