Understanding Static and Dynamic Resource Separation with Nginx

In web development, “dynamic” resources refer to backend‑generated content, while “static” resources include HTML, JavaScript, CSS, images and similar files.

Typically, static resources are deployed on a high‑performance server such as Nginx; when a request arrives, Nginx serves static files directly, and forwards dynamic requests to the backend application via reverse‑proxy, achieving static‑dynamic separation.

Adopting this separation greatly improves static asset access speed and allows front‑end and back‑end teams to work in parallel, reducing integration time.

Thus, static‑dynamic separation means deploying website static files (HTML, JavaScript, CSS, images, etc.) separately from the backend application to accelerate user access to static code and lessen load on the backend.

A common implementation places static assets on Nginx and the backend project on an application server, routing static requests to Nginx according to defined rules.

server {
    listen 80;
    server_name  hahashen.com;
    access_log  /data/nginx/logs/hahashen.com-access.log main;
    error_log  /data/nginx/logs/hahashen.com-error.log;
    # Dynamic requests are proxied to Tomcat
    location ~ .(jsp|page|do)?$ {
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_pass http://tomcat地址;
    }
    # Static files are served directly
    location ~ .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$ {
        expires      30d;
        root /data/hahashen/html ;
    }
}