Boost Website Speed with Nginx Static‑Dynamic Separation

Nginx is a fundamental component in large‑scale architectures, and static‑dynamic separation is a widely used pattern to optimize website performance.

The core idea is to handle static resources such as images, CSS, JavaScript, and other files separately from dynamic pages generated by backend applications. Static files are served directly by Nginx, while dynamic requests are forwarded to an application server (e.g., Tomcat, Node.js) via reverse proxy.

Static requests are identified by common file extensions ( .html, .css, .js, .jpg, .png, .gif, etc.). Nginx matches these extensions, reads the files from a local directory, returns them to the client, and can set long‑term caching (e.g., expires 30d) while optionally disabling access logs to reduce overhead.

Dynamic requests typically lack a specific file extension or end with extensions like .do, .jsp, .php. Nginx matches these URLs with a proxy rule and forwards them to the backend using the proxy_pass directive, also setting appropriate headers ( Host, X-Real-IP, X-Forwarded-For) to preserve client information.

Below is a practical Nginx configuration that implements the separation:

# Static resource handling
location ~* \.(html|htm|css|js|gif|jpg|jpeg|bmp|png|txt)$ {
    root /usr/local/nginx/static;
    expires 30d;               # cache static files
    access_log off;             # disable logging for performance
}

# Dynamic request handling
location / {
    proxy_pass http://backend_servers;   # forward to backend
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

With this setup, static assets are delivered quickly from the file system, and dynamic traffic is efficiently routed to the application layer, resulting in noticeably faster page loads and higher concurrent request capacity.