Mastering Nginx Static‑Dynamic Separation for High‑Performance Web Architecture

Nginx is a fundamental skill for large‑scale architectures; separating static and dynamic content improves performance, scalability, and resource utilization.

What is static‑dynamic separation?

Static separation means serving assets such as HTML, CSS, JavaScript, images, and videos directly from Nginx (or a CDN/object storage) while routing API calls, template rendering, and business‑logic requests to application servers like Tomcat, Node, or PHP‑FPM.

Typical architecture

Client → Nginx reverse proxy (entry point)

Nginx serves static files directly or forwards them to a CDN/object storage.

Dynamic requests are proxied to an upstream pool of application servers.

Optional caching layer (Nginx cache or CDN) and load‑balancing with health checks and circuit‑breaker logic.

Nginx static‑dynamic separation principles

Nginx matches URLs using location, try_files, and rewrite directives. Static files are usually identified by file‑extension regex (e.g., \.(css|js|png|jpg|gif|ico|html)$) and served from the local file system using the kernel sendfile() zero‑copy mechanism, achieving sub‑10 ms latency.

Dynamic requests that do not match the static patterns are forwarded with proxy_pass to an upstream backend, where Nginx handles load balancing, connection reuse, and buffering, reducing pressure on the application servers.

Complete configuration example

http {
    # Enable efficient file transfer
    sendfile        on;
    tcp_nopush      on;

    upstream backend_server {
        server 192.168.1.10:8080;   # Tomcat / app server
        server 192.168.1.11:8080;   # Another instance
    }

    server {
        listen       80;
        server_name  example.com;

        # 1. Static resource routing
        location ~* \.(jpg|jpeg|png|gif|css|js|ico|html)$ {
            root   /data/www/static/;
            expires 30d;                     # Browser cache for 30 days
            add_header Cache-Control "public";
            access_log off;                  # Disable access log for static files
        }

        # 2. Dynamic request routing
        location /api/ {
            proxy_pass http://backend_server;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 3. Default root path for other requests
        location / {
            root   /data/www/html/;
            index  index.html;
        }
    }
}

Explanation of key blocks

Static location : Uses a case‑insensitive regex ( ~*) to match common static extensions, sets the document root, adds a long‑term Expires header, and disables logging to improve throughput.

Dynamic location : Matches the /api/ prefix, proxies the request to the backend_server upstream, and forwards essential headers so the backend can see the original host and client IP.

Default location : Serves the main website entry point (e.g., index.html) from the HTML root directory.

Priority and matching order

In Nginx, location blocks with regular expressions have higher priority than prefix locations. Therefore, static files are served first; any request that does not match the static regex falls through to the dynamic or default blocks.

By applying this configuration, you achieve low‑latency static delivery, efficient load balancing for dynamic workloads, and a clear separation that simplifies scaling and maintenance.