Boost Web Performance: Master Nginx Static‑Dynamic Separation with Real‑World Configurations

What is static‑dynamic separation?

Static‑dynamic separation is a classic web performance technique where Nginx directly serves static files (images, CSS, JS, HTML, etc.) while forwarding dynamic requests that require backend processing to an application server.

Dynamic resources (dynamic) : URLs that invoke backend logic, e.g. /api/userinfo, /search?keyword=abc, *.jsp, *.php, *.do.

Static resources (static) : Files that can be returned without backend processing, e.g. *.jpg, *.png, *.gif, *.css, *.js, *.html, *.mp4, *.txt.

Nginx handles static resources directly; the application server only processes dynamic requests.

This design speeds up static content delivery and reduces load on the backend server.

Benefits of static‑dynamic separation

Reduced application server load : The backend focuses on dynamic logic, improving overall efficiency.

Faster static asset delivery : Nginx, written in C, serves static files with very high throughput.

Improved user experience : Faster page rendering thanks to quick static resource loading.

Easy CDN integration : Static assets can be offloaded to a CDN for global acceleration.

Simplified scaling : Static and dynamic services can be scaled independently.

Core implementation ideas

Routing is based on URL patterns or file extensions:

location ~ .*\\.(js|css|ico|png|jpg|gif|mp4)$ { # static resources }

location ~ .*\\.(jsp|do|php)$  { # dynamic requests }
location /api/ { # dynamic API }

Nginx configuration details

1. Upstream definition (backend servers)

upstream backend_servers {
    server 192.168.1.10:8080;
    server 192.168.1.11:8080;
    # optional load‑balancing parameters such as weight, ip_hash
}

2. Static resource block

location ~ .*\\.(gif|jpg|jpeg|png|ico|svg|js|css|html|ttf|woff|woff2)$ {
    root /usr/share/nginx/html/static;
    sendfile on;
    tcp_nopush on;
    expires 30d;               # browser cache for 30 days
    try_files $uri $uri/ =404; # return 404 if file not found
}

3. Dynamic request proxy

location / {
    proxy_pass http://backend_servers;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Key directives explained

root vs alias : root appends the request URI to the path; alias replaces the location prefix.

try_files : Checks file existence in order to avoid incorrect proxying.

expires : Controls browser caching to speed up repeat visits.

proxy_pass : Forwards dynamic requests to the backend.

Practical example (Spring Boot + Vue/React)

Assume the front‑end build output resides in /home/project/frontend and the Spring Boot JAR runs on port 8080.

Project structure

/home/project/
├── frontend/
│   ├── index.html
│   ├── js/
│   ├── css/
│   └── img/
└── backend.jar

Start the backend java -jar backend.jar --server.port=8080 Nginx server block

server {
    listen 80;
    server_name your-server-ip;
    root /home/project/frontend;
    index index.html;

    # static assets
    location ~ .*\\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|ttf|woff|woff2)$ {
        expires 7d;
        try_files $uri $uri/ @proxy;
    }

    # dynamic API
    location /api/ {
        proxy_pass http://127.0.0.1:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # SPA history mode
    location / {
        try_files $uri $uri/ /index.html;
    }

    # fallback proxy for other requests
    location @proxy {
        proxy_pass http://127.0.0.1:8080;
    }
}

Verification and reload

sudo nginx -t        # test configuration syntax
sudo nginx -s reload # gracefully reload

Test URLs: http://your-server-ip/ – serves the front‑end homepage. http://your-server-ip/js/app.js – Nginx returns the static JS file. http://your-server-ip/api/users/1 – request is proxied to Spring Boot.

Optimization recommendations

Enable sendfile and tcp_nopush to improve large file transfer efficiency.

Leverage browser caching for static assets to reduce server load and speed up client access.

Use a CDN for global static asset acceleration.

Front‑end build optimizations : minify JS/CSS, enable file fingerprinting (hash) and long‑term caching.

Monitoring and logging : configure Nginx access and error logs to track traffic and anomalies.

By following these steps you can build a high‑performance, scalable architecture where Nginx efficiently serves static files, the backend focuses on dynamic logic, and additional caching or CDN layers further boost responsiveness.