Laravel Inertia.js React SSR Vite Nginx Gzip configuration

It's a day that I'm working on optimizing my webpage to use Inertia SSR and Gzip correctly from how to change the Vite config to how the Nginx config should be. Now I love to share the configs here so you guys can correct me and use my config as you wish!

First, make sure that you already completed the SSR Inertia doc guide

Install compression lib yarn add vite-plugin-compression

Vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import viteCompression from 'vite-plugin-compression';
import { resolve } from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
        viteCompression({
            algorithm: 'gzip',
            ext: '.gz',
            threshold: 10240,
            deleteOriginFile: false,
        })
    ],
    define: {
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    },
    resolve: {
        alias: {
            '@': resolve(__dirname, 'resources/js'),
            ziggy: resolve('vendor/tightenco/ziggy/dist'),
        },
    },
});

Then here is the Nginx conf of my site note that the gzip is already on my using main nginx conf (nginx.conf) gzip on;

here is my site config in 'sites-available/MYSITE.com'

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+>

gzip_static on;

map $uri $gzip_extension {
    ~*\.css$ .css.gz;
    ~*\.js$ .js.gz;
}

server {
    server_name YOURDOMAIN.com;
    root /var/www/PROJECT_FOLDER_NAME/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri$gzip_extension $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    location ^~ /build/ {
        expires max;
        add_header Cache-Control "public, max-age=31536000, immutable";
        try_files $uri$gzip_extension $uri =404;
    }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_hide_header X-Powered-By;
    }


    location ~ /\.(?!well-known).* {
        deny all;
    }

    location /webhook {
     alias /var/www/PROJECT_FOLDER_NAME/webhook.php;
     include fastcgi_params;
     fastcgi_param SCRIPT_FILENAME $document_root/webhook.php;
     fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
    }


    location /ssr {
        proxy_pass http://127.0.0.1:INERIA_SSR_RUNNING_PORT;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        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;

    }

    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/YOURDOMAIN/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/YOURDOMAIN/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}
server {
    if ($host = YOURDOMAIN.com) {
        return 301 https://$host$request_uri;
    }


    listen 80;
    listen [::]:80;
    server_name YOURDOMAIN.com;
    return 404;
}

keep Inertia SSR running on a specific port (INERIA_SSR_RUNNING_PORT) using Pm2 you need to install pm2 on your server