Optimizing High Traffic Nuxt3 Project with Nginx for Static and JavaScript File Serving

[mercs600]

Hello Nuxt/Nitro Team,

We are working on a large-scale Nuxt3 project that is experiencing significant traffic. Due to the high volume of users, we are aiming to optimize performance as much as possible. While Nitro provides excellent capabilities, we have decided to use Nginx for serving our static and JavaScript files, as it offers enhanced performance benefits for high traffic scenarios.

Here are the configurations we've started with, and I'm seeking advice on whether these are optimal or if there are more efficient alternatives:

1. Serving Static Files from the public folder:

location / {
    proxy_pass http://localhost:3000;
    # Other proxy directives...
}

location /public/ {
    root /path/to/your/project;
    try_files $uri $uri/ @nuxt;
}

location @nuxt {
    proxy_pass http://localhost:3000;
}

2. Handling JavaScript Files:

Currently, JavaScript files are being handled by Nitro, but we are considering switching to Nginx for these as well. Our idea is to redirect all requests for JavaScript files to the _nuxt/ folder. For example, we could use an Nginx configuration like this:

location /_nuxt/ {
    root /path/to/your/nuxt/project;
    try_files $uri $uri/ =404;
}

With this setup, would simply redirecting all traffic for JavaScript files to the _nuxt/ folder be sufficient to serve them correctly through Nginx instead of Nitro?

Is there a more efficient or recommended configuration for this use case? We want to ensure that this change optimizes performance without compromising the functionality of our Nuxt application.

[manniL]

Let's consolidate in nuxt/nuxt#25035