1. What is Nginx Static-Dynamic Separation?¶

In simple terms, static-dynamic separation separates a website’s “static resources” and “dynamic resources” to handle them through different “channels.”

• Static resources: Such as images (jpg/png), CSS style files, JavaScript scripts, and HTML pages (non-dynamically rendered). These files are usually unchanging and have high access frequency, making them suitable for direct, fast delivery by Nginx.
• Dynamic resources: Such as PHP scripts, backend APIs (e.g., Python/Java services), and database queries. These require server computation or data access, are time-consuming to process, and are better handled by dedicated backend servers.

As a high-performance web server, Nginx excels at static resource processing. The core of static-dynamic separation is to let Nginx focus on “fast responses to static resources,” while dynamic resources are forwarded to backends (e.g., PHP-FPM, Node.js) via reverse proxy. This improves website loading speed and stability.

2. Why Is Static-Dynamic Separation Needed?¶

1. Better User Experience: Static resources are returned directly by Nginx without backend computation, significantly reducing page load time. For example, a webpage with 10 images loads faster when static resources are separated, reducing user waiting time.
2. Reduced Backend Load: Dynamic resources (e.g., PHP parsing, database queries) typically consume more CPU/memory. After separation, backends only process dynamic requests, lowering server load and improving stability.
3. Stronger Scalability: Static resources can be easily migrated to CDNs (Content Delivery Networks), allowing users to access resources locally. Dynamic resources can also use load balancing across multiple backend servers to share pressure.

3. How Does Nginx Implement Static-Dynamic Separation?¶

The core principle is to use Nginx’s location directive to match different request types and handle static/dynamic resources separately.

1. Static Resource Handling¶

Use location to match common static resource suffixes (e.g., .jpg, .js, .css). The root directive specifies the static file path, and Nginx directly returns the file.

2. Dynamic Resource Handling¶

Use location to match dynamic requests (e.g., .php, /api). The proxy_pass or fastcgi_pass directive forwards requests to backend servers (e.g., PHP-FPM, Node.js).

4. Practical Configuration Steps (Example with PHP Websites)¶

Assume your website structure:
- Static resources (images, CSS, JS) are stored in /usr/share/nginx/html/static.
- Dynamic resources (PHP files) are stored in /usr/share/nginx/html and need processing by PHP-FPM (default listens on 127.0.0.1:9000).

1. Modify the Nginx Configuration File¶

Locate the Nginx site configuration file (e.g., /etc/nginx/sites-available/default on Ubuntu) and add the following in the server block:

server {
    listen 80;
    server_name yourdomain.com;  # Replace with your domain or IP

    # 1. Handle static resources (match common suffixes)
    location ~* \.(jpg|jpeg|png|gif|js|css|html|htm|ico)$ {
        root /usr/share/nginx/html/static;  # Static resource path
        expires 7d;  # Cache static resources for 7 days (no repeated requests)
        add_header Cache-Control "public, max-age=604800";  # Explicit cache policy
        index index.html;  # Default homepage
    }

    # 2. Handle dynamic resources (PHP requests)
    location ~ \.php$ {
        root /usr/share/nginx/html;  # PHP file root directory
        fastcgi_pass 127.0.0.1:9000;  # Forward to PHP-FPM
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;  # Load FastCGI parameters
    }

    # 3. Other requests (e.g., root directory homepage)
    location / {
        root /usr/share/nginx/html;
        index index.html index.php;
    }
}

2. Verify Configuration and Restart Nginx¶

• Check configuration syntax:

  sudo nginx -t  # Success if "test is successful"

• Restart Nginx:

  sudo systemctl restart nginx  # Ubuntu/Debian
  # Or
  sudo service nginx restart  # CentOS

3. Test Static-Dynamic Separation¶

• Static resource test: Place test.jpg in /usr/share/nginx/html/static. Access http://yourdomain.com/static/test.jpg—if the image loads, it works.
• Dynamic resource test: Place test.php (content: <?php phpinfo(); ?>) in /usr/share/nginx/html. Access http://yourdomain.com/test.php—if PHP configuration info displays, it works.

5. Summary¶

The core of Nginx static-dynamic separation is using location to distinguish static/dynamic requests, letting Nginx handle static resources and backends handle dynamic requests. Key steps:
1. Use ~* to match static resource suffixes (e.g., \.(jpg|js|css)$).
2. Use root to specify the static file path.
3. Use fastcgi_pass to forward dynamic requests to the backend (e.g., PHP-FPM).

After configuration, website loading speed improves, and server pressure decreases. Further optimizations (e.g., Gzip compression, static resource CDN) can enhance efficiency and stability.