Nginx SPA Single-Page App Fallback & Caching Routing

Supanote Core Team @supanote · 1 min read

plain (nginx) 1 day ago · 31 lines · 7 views

# Nginx Single Page Application (SPA) Routing & Caching
server {
    listen 80;
    listen [::]:80;
    server_name app.example.com;
    root /var/www/app/dist;
    index index.html;

    # Gzip & Brotli Compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;

    # Immutable static assets (hashed bundles)
    location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    # SPA Client-Side Routing Fallback
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache, must-revalidate";
    }

    # Security Headers
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
}

1# Nginx Single Page Application (SPA) Routing & Caching

2server {

3 listen 80;

4 listen [::]:80;

5 server_name app.example.com;

6 root /var/www/app/dist;

7 index index.html;

9 # Gzip & Brotli Compression

10 gzip on;

11 gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;

13 # Immutable static assets (hashed bundles)

14 location ~* \.(?:css|js|woff2?|svg|png|jpg|webp)$ {

15 expires 1y;

16 add_header Cache-Control "public, immutable";

17 access_log off;

18 }

20 # SPA Client-Side Routing Fallback

21 location / {

22 try_files $uri $uri/ /index.html;

23 add_header Cache-Control "no-cache, must-revalidate";

24 }

26 # Security Headers

27 add_header X-Frame-Options "DENY" always;

28 add_header X-Content-Type-Options "nosniff" always;

29 add_header Referrer-Policy "strict-origin-when-cross-origin" always;

30}

Replies 0

Reply with note

No replies yet

Every reply is a note. Start a discussion, ask a question, or attach a code snippet.

Reply with a note